Webpack + Vue，部署时减小包体积的几种方法

时间 2019-11-05

标签 webpack vue 部署减小体积几种方法繁體版

原文原文链接

做为一个作 SPA 起家的框架，Vue 的开发学习曲线较为平缓，相对来讲，开发体验属于上乘。但很多初学者会发现，本身的站点，随随便便打包文件就有 10M ！难以置信，其实这跟 Vue 的性能没有太大关系，咱们能够经过配置文件来大大改善这一状况。css

减小打包后文件体积的方法：html

采用懒加载
启用 Gzip 压缩
将依赖库挂到 CDN 上
减小没必要要的库依赖

准备知识：

如何用 vue-cli 建立 Vue 应用，并对其有必定了解，不然，请移步官网

对 Webpack 有了解，知道它是一个打包工具，而且它的四大要素：entity、output、。进一步理解 webpack，移步这里

懒加载

官网上对懒加载的解释是这样的：vue

当打包构建应用时，Javascript 包会变得很是大，影响页面加载。若是咱们能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件，这样就更加高效了。webpack

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。web

它的做用是实现延迟加载，避免一次性加载过大的文件，增长首页渲染时间，影响用户体验。vue-router

如何实现？

要实现懒加载很简单，咱们只须要改变组件的导入方式：vue-cli

before:npm

import Article from '@/components/Article'
复制代码

after:element-ui

const Article = () => import('@/components/Article')
复制代码

原理是什么？

本质上，它是利用了 Promise，具体请见：异步组件json

启用 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-ui、lodash、highlight 等等。不知道大家看到是什么心情，反正我都想删掉它们，本身写须要的功能了，毕竟我只须要它们其中的一小部分功能，却牺牲了大量的带宽！

写在最后

webpack 是一个强大的打包工具，这篇文章写于 V3.4 的时候，如今 V4 已经出来了，配置文件更加地简单，值得一看！本文写得粗糙，若是不对之处，欢迎批评指正！

本文参考连接：

Vue.js路由懒加载[译]

关于vue的webpack打包优化问题

vue首屏加载优化