Vue项目打包优化
最近做完了一个项目,但是打包之后发现太大了,记录一下优化方案
- Element、Vant 等组件库按需加载
- 静态资源使用cdn进行引入
- 开启gzip压缩
- 路由懒加载
#首先看看啥也没做时打包的大小
可以使用 webpack-bundle-analyzer
插件在打包时进行分析
可以看到有2.5M的大小,下面就进行优化
Element、Vant 等组件库按需加载
可以看到,在打包的文件中,占据最大比例的是这两个组件库,我们可以使用按需加载来减小 按需加载按照官方文档来就行,需要注意配置bebel.config.js
// 在bebel.config.js的plugins选项中配置
["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ],
["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }, 'vant']
配置后的大小,可以明显的看到有减小
静态资源使用cdn进行引入
接下来占比最大的就是一些可以通过cdn进行引入的静态资源了
设置例外
vue.config.js
文件中进行设置例外,不进行打包
设置例外的时候 key:value 中key的值为你引入的库的名字,value值为这个库引入的时候挂在window上的属性
config.externals({
"vue":'Vue',
"vue-wordcloud":'WordCloud',
"@wangeditor/editor-for-vue":"WangEditorForVue",
})
然后在项目的 public/index.html 文件中进行cdn引入
cdn的话有挺多种的,比如bootcdn
、jsdelivr
等,推荐使用jsdelivr
,npm
官方就是使用的这个
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-wordcloud@1.1.1/dist/word-cloud.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor-for-vue@1/dist/index.js"></script>
完成后
gzip压缩
开启gzip压缩需要使用插件,可以用compression-webpack-plugin
在vue.config.js
文件中进行配置
chainWebpack: config => {
config.optimization.minimize(true)
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.css$|\.html$/,
algorithm: 'gzip',
threshold: 10240,
deleteOriginalAssets: false,
})
]
}
}
}
完成后
在配置完成后,在本地并不能开启使用,需要配置Nginx
进行支持才行
路由懒加载
路由懒加载的基础是webpack
的Magic Comments
官方文档
// 在路由配置中,通过下面这种方式导入对应组件
component: () => import(/* webpackChunkName: "mColumn" */ '../mviews/ColumnView.vue')
完成后
路由懒加载并不会减小文件打包后的大小,但是可以让文件分为不同的模块,当路由跳转时,才加载当前路由对应的组件
这样就可以大大减少首屏白屏的时间,不用在第一次进入的时候就加载全部的文件
如图,当第一次进入的时候只会加载到home.xx.js,当进入另一个路由的时候就会去加载对应组件,如图中的socket.xx.js
作者:羞男
来源:juejin.cn/post/7224036517139939386
来源:juejin.cn/post/7224036517139939386