前言
打包不优化,亲人泪两行,附图(未优化前):
分析打包后各文件的体积
安装
webpack
插件webpack-bundle-analyzer
执行命令npm install --save-dev webpack-bundle-analyzer
或yarn add -D webpack-bundle-analyzer
这是一款可视化分析webpack
打包后各文件体积的插件
再vue.config.js
里添加如下代码:
module.exports = {
chainWebpack: config => {
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
普通webpack项目配置方式:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
再
package.json
的scripts
里配置"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
别忘记安装cross-env
。
配置完成后,执行npm run analyz
命令。
运行完毕后,浏览器打开http://127.0.0.1:8888/
,可以看到如下内容:
CDN资源引入
尽可能将所有第三方库使用cdn引入,参考文章
在vue.config.js
文件中添加如下设置:
chainWebpack: config => {
config.externals({
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
echarts: 'echarts',
moment: 'moment',
tinymce: 'tinymce',
nprogress: 'NProgress',
...
})
},
属性名是引入的模块名,值是需要替换的变量,这个值必须和 cdn 中提供的一样,其作用是不打包使用外部引入的扩展,也就是 build 的时候不打包这也模块。详见 webpack 外部扩展。
同时修改public/index.html
,引入CDN资源
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" crossorigin="anonymous"></script>
...
script 元素中设置了 crossorigin 属性,避免跨域的警告,详见 CORS settings attributes 。
代码分割
再vue.config.js
添加如下代码(vue-cli3默认已添加):
chainWebpack: config => {
config.optimization.splitChunks({
chunks: 'all'
})
}
开启Gzip压缩
执行
npm i compression-webpack-plugin --D
安装依赖compression-webpack-plugin
在vue.config.js
配置如下代码:
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
configureWebpack: config => {
const plugins = [];
// Begin 生成 gzip 压缩文件
plugins.push(
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
);
// End 生成 gzip 压缩文件
config.plugins = [...config.plugins, ...plugins];
}
并在nginx
配置如下代码:
gzip on; # 开启Gzip压缩
gzip_min_length 1k; # 大于1K的文件才会压缩
gzip_buffers 4 16k; # 压缩的缓存区,可以不用管,照写就是。
gzip_comp_level 3; # 压缩的级别,越高,压缩的文件越小,但是压缩的时间比较长。
gzip_types text/plain text/css application/xml application/javascript application/x-javascript text/javascript; # 压缩的类型