2020-03-05 为Webpack Vue项目瘦身-CSDN博客

本文链接：https://blog.csdn.net/rockage/article/details/105043579

在利用webpack脚手架搭建vue项目后，往往最终打包的.js和.css文件过于庞大，造成首次加载的时候白屏时间过长，十分影响用户体验，下图为未经任何优化直接npm run build之后的情况：

image.png
其中vendor.js文件高达1.16MB，平均白屏时间超过10秒，这个确实有点影响用户体验了。

第一步：使用CDN剥离JS文件，让他们独立加载，而不是整体打包：

1. 找出那些巨头JS文件，如本例中的：Vue、Vue-Router、Element-UI、Quill等。

2. 访问https://www.bootcdn.cn/，找到这些文件的CDN引用（当然也可以是别的CDN网站，本例使用bootcdn.cn）

3. 修改项目根目录下的 index.html

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!--在meta这一行下面添加刚才在cdn网站找到的引用，注意版本号要和你的package.json里的一致 -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<link href="https://cdn.bootcss.com/quill/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/quill/1.3.7/quill.min.js"></script>
<script src="/static/js/vue-quill-editor.js"></script>

4. 修改 /build/webpack.base.conf.js 文件

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
// 在这个位置添加externals设置：
  externals: { 
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT', //注意element-ui的引用时纯大写
    'vue-quill-editor': 'VueQuillEditor',
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

回到Vue源文件里面，删除所有于Vue、Vue-Router、element-ui相关的import和Use, 例如：

//import ElementUI from 'element-ui'
//import Vue from 'vue'
//import Router from 'vue-router'
//Vue.use(ElementUI)
//Vue.use(Router)
//Vue.use(VueQuillEditor)

这些代码统统注释或者删除掉，因为在externals里面已经做过声明了，如果再在Vue文件里声明一次，将会报重复引用的错误。
完成后，再执行一次npm run build，发现果然大大地瘦了一次身，如图：

image.png
vendor.js从1.2M瞬间减肥减到了109Kb，效果还是很惊人的！

4. 开启zip压缩模式，进一步瘦身

找到：/config/index.js，将productionGzip改为true

    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

安装webpack压缩软件：

npm install --save-dev compression-webpack-plugin@1.1.11

检查服务器端有没有打开gzip，这里以nginx为例，检查nginx.conf文件：

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;