作为一个做 PWA 起家的框架, vue 的开发学习曲线较为平缓, 相对来说, 开发体验属于上乘但不少初学者会发现, 自己的站点, 随随便便打包文件就有 10M ! 难以置信, 其实这跟 Vue 的性能没有太大关系, 我们可以通过配置文件来大大改善这一情况
减少打包后文件体积的方法:
采用懒加载
启用 Gzip 压缩
将依赖库挂到 CDN 上
减少不必要的库依赖
准备知识:
如何用 vue-cli 创建 Vue 应用, 并对其有一定了解, 否则, 请移步官网
对 webpack 有了解, 知道它是一个打包工具, 并且它的四大要素: entityoutput 进一步理解 webpack, 移步这里
懒加载
官网上对懒加载的解释是这样的:
当打包构建应用时, Javascript 包会变得非常大, 影响页面加载如果我们能把不同路由对应的组件分割成不同的代码块, 然后当路由被访问的时候才加载对应组件, 这样就更加高效了
结合 Vue 的异步组件和 Webpack 的代码分割功能, 轻松实现路由组件的懒加载
它的作用是实现延迟加载, 避免一次性加载过大的文件, 增加首页渲染时间, 影响用户体验
如何实现?
要实现懒加载很简单, 我们只需要改变组件的导入方式:
- before:
- import Article from '@/components/Article'
- after:
- const Article = () => import('@/components/Article')
原理是什么?
本质上, 它是利用了 Promise, 具体请见: 异步组件
启用 Gzip 压缩
vue 默认不启用 Gzip 压缩, 但我们知道, 压缩后的文件体积会大大减少, 这适用于线上部署 如何启用也很简单: 首先, 在 config 中将
build.productionGzip
设置为 true 然后, 确认
webpack.prod.conf.js
中有如下代码:
- if (config.build.productionGzip) {
- const CompressionWebpackPlugin = require('compression-webpack-plugin')
- webpackConfig.plugins.push(
- new CompressionWebpackPlugin({
- asset: '[path].gz[query]',
- algorithm: 'gzip',
- test: new RegExp(
- '\\.(' +
- config.build.productionGzipExtensions.join('|') +
- ')$'
- ),
- threshold: 10240,
- minRatio: 0.8
- })
- )
- }
如果有的话, 下面只要使用
npm install --save-dev compression-webpack-plugin
安装 webpack 插件, 这样, 你在 build 项目时, webpack 会帮你压缩文件 如果没有的话, 你只要把上面代码复制到 webpack 配置文件的 plugins 下即可 如何方面查看 build 之后的文件大小呢? 我们可以使用另外一个 webpack 插件:
webpack-bundle-analyzer
, 如何使用呢? 默认 Vue 会导入这个插件, 我们只需要调用即可: 在 package.json 文件中增加以下命令:
"analyzer": "NODE_ENV=production npm_config_report=true npm run build"
, 运行 npm run analyzer , 等待一会, 就可以看到整个项目的打包情况了
将依赖库挂到 CDN 上
如果你对首屏响应速度要求比较高, 那么, CDN 也不失为一种好方法 它的原理是将一些依赖库挂载到 CDN 上, 通过在 html 文件 script 便签引入的方式进行加载, 减少的打包文件, 从而缩小了体积
以 element 为例:
首先, 在 html 中引入库:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>demo-vue-project</title>
- <link rel="stylesheet" href="https://cdn.bootCSS.com/element-ui/2.0.8/theme-chalk/index.css">
- </head>
- <body>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
- </body>
- </html>
然后在
webpack.base.conf.js
中移除对这三个库的依赖:
- externals: {
- 'vue': 'Vue',
- 'vue-router': 'VueRouter',
- 'element-ui': 'ELEMENT'
- },
这样我们就可以愉快地享受 CDN 了
减少不必要的库依赖
这一点就是见仁见智了如果你使用了上面提到的
webpack-bundle-analyzer
, 你会发现占用你的包的大部分是你引用的一些库, 诸如: Element-uilodashhighlight 等等不知道你们看到是什么心情, 反正我都想删掉它们, 自己写需要的功能了, 毕竟我只需要它们其中的一小部分功能, 却牺牲了大量的带宽!
写在最后
webpack 是一个强大的打包工具, 这篇文章写于 V3.4 的时候, 现在 V4 已经出来了, 配置文件更加地简单, 值得一看! 本文写得粗糙, 如果不对之处, 欢迎批评指正!
本文参考链接:
vue.js 路由懒加载 [译]
关于 vue 的 webpack 打包优化问题
vue 首屏加载优化
来源: https://juejin.im/post/5abba68cf265da239c7b6bdc