使用vue-cli打包项目时候的一些体积优化方法

1.合理使用运行时依赖和开发依赖

作为开发者，要合理区分哪些插件是项目上线运行后需要的，哪些是用于打包编译，压缩而运行时并不需要的，进行分类安装。开发依赖不会被打包进最终的项目文件，能大大减少项目文件大小。

开发依赖在项目的package.json的devDependencies里，安装时使用的命令行：

npm install xxx --save–dev 
//简写
npm i xxx -D

运行时依赖在package.json的dependencies里，安装命令：

npm install xxx --save
//简写
npm i xxx -S

2.productionSourceMap: false

在config的index.js文件下，找到productionSourceMap设置为false。项目打包后都会经过压缩和混淆等处理，这样的话调试时无法找到报错出现的位置，productionSourceMap是为了找到错误发生位置而设置的，但项目上线后面对的是用户而不是程序员，这个配置就没必要了。划重点，这个选项能很大程度减小项目体积，博主曾经一个项目打包处理后1M+，productionSourceMap设置为false后只有300k+。

3.使用ui框架还要echart时按需引入

ui框架里面会有很多封装好的组件，但很多时候我们需要的可能只有寥寥几个，那这时候就需要按需引入了，下面用element-ui做例子演示按需引入。

1. 安装插件 babel-plugin-component
2. .bablerc中配置

   {
     "presets": [
       ["env", {
         "modules": false,
         "targets": {
           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
         }
       }],
       "stage-2"
     ],
     "plugins": [
       "transform-vue-jsx", 
       "transform-runtime",
       [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
       ]
     ]
   }

    

3. src文件夹下创建plugins文件夹，创建element-config.js，写入如下代码

   import Vue from 'vue'
   import {
     Button,
     Select,
     MessageBox
   } from 'element-ui'
   Vue.use(Button)
   Vue.use(Select)
   Vue.use(MessageBox)
   // 动态按需加载
   Vue.prototype.$alert = MessageBox.alert

   然后在main.js中写入import './plugin/element-config'

4.productionGzip: true

在config的index.js中找到productionGzip:设置为true。注意压缩前需要安装依赖CompressionWebpackPlugin。具体操作参考https://www.cnblogs.com/qixidi/p/10390759.html

webpack.prod.conf.js中配置

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|woff|ttf|json|txt|html|ico|svg)(\?.*)?$/i,
      threshold: 10240,
      minRatio: 0.8, // 压缩比小于这个才压缩
      deleteOriginalAssets: true // 仅保留压缩的文件
    })
  )
}

 

5.使用路由懒加载

更多的方法可参考：

https://segmentfault.com/a/1190000019499007#articleHeader4

https://www.jianshu.com/p/11c1d85ccd71

https://www.jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/

https://www.jianshu.com/p/171e8e529f35

https://blog.csdn.net/song_de/article/details/81511284