使用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