Vue项目打包优化 |
您所在的位置：网站首页 › vue项目优化掘金 › Vue项目打包优化 |
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进行引入的静态资源了 设置例外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官方就是使用的这个 复制代码 完成后开启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 |
【本文地址】
今日新闻 |
推荐新闻 |