vue项目后期优化(浅谈vue项目打包优化策略)

使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载。那么,怎么优化呢?

1.组件按需加载

这是首先可以优化的点。如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件。

示例如下:

1.1 element-ui

npm install babel-plugin-component -D

然后,将.babelrc 修改为:

{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

然后引入部分组件,这样一来,就不需要引入样式了,插件会帮我们处理。

// main.js import Vue from 'vue' import { Dialog, Loading } from 'element-ui' Vue.use(Dialog) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service // 然后正常使用组件

1.2 mint-ui

由于mint-ui是element-ui的移动端组件,所以它的使用和引入几乎和element-ui一样。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将.babelrc 修改为:

{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "mint-ui", "style": true } ]]] }

然后引入部分组件

// main.js import Vue from 'vue' import { Toast, MessageBox } from 'element-ui' Vue.use(Dialog) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service // 然后正常使用组件

belrc中配置,在引入的地方同时引入css即可。

1.3 echarts

首先安装babel-plugin-equire

npm i babel-plugin-equire -D

然后,在.babelrc文件中添加该插件

{ "plugins": [ // other plugins ... "equire" ] }

创建一个js文件

// echarts.js // eslint-disable-next-line const echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid' ]) export default echarts // 业务组件,引入echarts import echarts from '@/assets/lib/echarts' // 使用与以前一样

按需加载echarts

解决vue-cli首屏加载慢的问题

2.路由懒加载

这里需要一个插件

vue-router官方推荐syntax-dynamic-import插件,不过它要求同时安装@bable/core^7.0.0,如果你安装了babel-core6,是会有版本冲突的。我的做法如下

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0) // router.js const login = () => import('@/components/login') const router = new VueRouter({ routes: [ { path: '/login', component: login } ] })

还有一种魔法注释用法

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

3.异步组件

如果组件在页面加载时不需要,只在调用时用到,这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同

// template <test v-if="showTest"></test> // script components: { test: () => import('./test') // 将组件异步引入,告诉webpack,将该部分代码分割打包 }, methods:{ clickTest () { this.showTest = !this.showTest } }

4.图片的压缩合并

可以下载一个无损图片压缩工具,如有可能,将图片制作成精灵图

5.CDN加速

在index.html中引入cdn资源

... <body> <div id="app"> </div> <!-- built files will be auto injected --> <script src="http://img.studyofnet.comhttps://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="http://img.studyofnet.comhttps://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="http://img.studyofnet.comhttps://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="http://img.studyofnet.comhttps://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> </body> ...

修改 build/webpack.base.conf.js

module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, externals:{ 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex', 'vue-resource': 'VueResource' }, ... }

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue' // import VueResource from 'vue-resource' // Vue.use(VueResource)

6.压缩代码

vue-cli已经使用UglifyJsPlugin 插件来压缩代码,可以设置成如下配置:

compress: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false })

其中sourceMap: false是禁用除错功能。

如果设为true,在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。

对前端的技术,架构技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的架构师学习资料

知识体系已整理好,欢迎免费领取。还有面试视频分享可以免费获取。关注我,可以获得没有的架构经验哦!!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页