vue-cli3构建的项目打包之后优化
2019-05-07 本文已影响0人
echo三文鱼
项目结构vue2.0+vue-cli3+node后端提供接口+apache做服务
一共通过两个方式：cdn和gzip
1、cdn
将项目里面依赖的插件用cdn外链，主要是前端操作
步骤：先看你的package.json的项目依赖，然后修改vue.config.js(这是针对3.0版本的修改)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const cdn = {
// 开发环境所用到的项目依赖
dev: {
css: [],
js: []
},
// 生产环境所用到的项目依赖
build: {
css: [],
js: [/*放插件的cdn地址(国内比较常用的bootcdn.com)*/]
}
}
// cdn预加载使用，webpack里面要用到的外部扩展插件，需要注意的是后面的名称，是该插件暴露出来的全局对象名，可以在项目的window里面找到对应的名称（原理不太清楚，因为项目里面的命名和全局对象名不对应的时候怎么找到该插件的呢？希望有大佬能够解答）
const externals = {
'axios': 'axios',
'jquery':'jQuery'
}
module.exports = {
configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
const myConfig = {}
if (IS_PROD) {
// cdn引用时配置externals
myConfig.externals = externals
myConfig.plugins = []
config.optimization.minimizer[0].options.terserOptions.keep_fnames = true
config.optimization.minimizer[0].options.terserOptions.keep_classnames = true
} else {
config.devtool = 'cheap-module-eval-source-map'
}
return myConfig
},
chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
config.plugin('html').tap(args => {
if (IS_PROD) {
args[0].cdn = cdn.build
} else {
args[0].cdn = cdn.dev
}
return args
})
}
}
配置文件修改完成之后，还要改对应的index.html（在build文件下下）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel=icon href=favicon.ico>
<title>project</title>
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id=app></div>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
然后build之后再看你对应的文件大小（ps:如果你打包之后的文件只有两个，而且很大，可以看下vue-router里面的懒加载，即：import project from '@/pages/project' => component:require('@/pages/project')）
第二个步骤，开启gzip
前端部分
1、安装插件：npm install 'compression-webpack-plugin' -s
2、修改配置文件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
configureWebpack: config => {
const myConfig = {}
if (IS_PROD) {
myConfig.plugins = []
// 添加gzip
myConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 240,
minRatio: 0.8
})
);
} else {
config.devtool = 'cheap-module-eval-source-map'
}
return myConfig
},
}
build之后你会发现你的dist文件里面多了很多压缩包，但是原始文件也在，怎么让服务器能够读取并解析你的gzip包，就需要修改服务端
node后端
1、安装'compression'
2、修改app.js
var compression = require('compression');
app.use(compression());
apache服务器修改配置文件httpd.conf
空白处添加
<IfModule mod_deflate.c>
# 告诉 apache 对传输到浏览器的内容进行压缩
SetOutputFilter DEFLATE
# 压缩等级 9
DeflateCompressionLevel 9
</IfModule>
这两个前面的#去掉
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
两个步骤完成之后，再运行你的项目可以看到network里面的请求，response Headers多了一个Content-Encoding: gzip，那就说明完成了。
