浅谈vue项目打包优化策略

原创 Fly丶 教程 vue专题 42阅读 15 天前 举报

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

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

示例如下:

1.1 element-ui

然后,将.babelrc 修改为:

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

前端全栈学习交流圈:866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈,提升思维能力

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

首先,安装 babel-plugin-component:

然后,将.babelrc 修改为:

然后引入部分组件

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

1.3 echarts
首先安装babel-plugin-equire

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

创建一个js文件

按需加载echarts

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

2.路由懒加载
这里需要一个插件

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

还有一种魔法注释用法

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

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

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

5.CDN加速
在index.html中引入cdn资源

修改 build/webpack.base.conf.js

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

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

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

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

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复