總結幾個webpack打包優化的方法

時間 2020-02-10

標籤總結幾個 webpack 打包優化方法简体版

原文原文鏈接

爲何要優化打包？

項目越作越大，依賴包愈來愈多，打包文件太大
單頁面應用首頁白屏時間長，用戶體驗差

咱們的目的

減少打包後的文件大小
首頁按需引入文件
優化 webpack 打包時間

優化方式

一、按需加載

1.1 路由組件按需加載css

const router = [
  {
    path: '/index',
    component: resolve => require.ensure([], () => resolve(require('@/components/index')))
  },
  {
    path: '/about',
    component: resolve => require.ensure([], () => resolve(require('@/components/about')))
  }
]

1.2 第三方組件和插件。按需加載需引入第三方組件html

// 引入所有組件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// 按需引入組件
import { Button } from 'element-ui'
Vue.component(Button.name, Button)

1.3 對於一些插件，若是隻是在個別組件中用的到，也能夠不要在 main.js 裏面引入，而是在組件中按需引入前端

// 在main.js引入
import Vue from vue
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

// 按組件按需引入
import { Vuelidate } from 'vuelidate'

二、優化 loader 配置

優化正則匹配
經過 cacheDirectory 選項開啓緩存
經過 include、exclude 來減小被處理的文件。

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader?cacheDirectory',
      include: [resolve('src')]
    }
  ]
}

三、優化文件路徑——省下搜索文件的時間

extension 配置以後能夠不用在 require 或是 import 的時候加文件擴展名,會依次嘗試添加擴展名進行匹配。
mainFiles 配置後不用加入文件名，會依次嘗試添加的文件名進行匹配
alias 經過配置別名能夠加快 webpack 查找模塊的速度。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

四、生產環境關閉 sourceMap

sourceMap 本質上是一種映射關係，打包出來的 js 文件中的代碼能夠映射到代碼文件的具體位置,這種映射關係會幫助咱們直接找到在源代碼中的錯誤。
打包速度減慢，生產文件變大，因此開發環境使用 sourceMap，生產環境則關閉。

五、代碼壓縮

UglifyJS: vue-cli 默認使用的壓縮代碼方式，它使用的是單線程壓縮代碼，打包時間較慢
ParallelUglifyPlugin: 開啓多個子進程，把對多個文件壓縮的工做分別給多個子進程去完成

兩種方法使用以下：vue

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false
      }
    },
    sourceMap: true,
    parallel: true
  }),

  new ParallelUglifyPlugin({
    //緩存壓縮後的結果，下次遇到同樣的輸入時直接從緩存中獲取壓縮後的結果並返回，
    //cacheDir 用於配置緩存存放的目錄路徑。
    cacheDir: '.cache/',
    sourceMap: true,
    uglifyJS: {
      output: {
        comments: false
      },
      compress: {
        warnings: false
      }
    }
  })
]

六、提取公共代碼

相同資源重複被加載，浪費用戶流量，增長服務器成本。
每一個頁面須要加載的資源太大，致使網頁首屏加載緩慢，影響用戶體驗。

webpack3 使用 CommonsChunkPlugin 的實現：node

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function(module, count) {
      console.log(module.resource, `引用次數${count}`)
      //"有正在處理文件" + "這個文件是 .js 後綴" + "這個文件是在 node_modules 中"
      return module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
    }
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    chunks: 'initial',
    minChunks: 2
  })
]

webpack4 使用 splitChunks 的實現：webpack

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          priority: 1, //添加權重
          test: /node_modules/, //把這個目錄下符合下面幾個條件的庫抽離出來
          chunks: 'initial', //剛開始就要抽離
          minChunks: 2 //重複2次使用的時候須要抽離出來
        },
        common: {
          //公共的模塊
          chunks: 'initial',
          minChunks: 2
        }
      }
    }
  }
}

七、CDN 優化

隨着項目越作越大，依賴的第三方 npm 包愈來愈多，構建以後的文件也會愈來愈大。
再加上又是單頁應用，這就會致使在網速較慢或者服務器帶寬有限的狀況出現長時間的白屏。

一、將 vue、vue-router、vuex、element-ui 和 axios 這五個庫，所有改成經過 CDN 連接獲取，在 index.html 裏插入相應連接。ios

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" />
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
  <!-- built files will be auto injected -->
</body>

二、在 webpack.config.js 配置文件web

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios':'axios'
    }
  },

三、卸載依賴的 npm 包，npm uninstall axios element-ui vue vue-router vuexvue-router

四、修改 main.js 文件裏以前的引包方式vuex

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// import VueRouter from 'vue-router'

import App from './App.vue'
import routes from './router'
import utils from './utils/Utils'

Vue.use(ELEMENT)
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash', //路由的模式
  routes
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

八、使用 HappyPack 多進程解析和處理文件

因爲運行在 Node.js 之上的 Webpack 是單線程模型的，因此 Webpack 須要處理的事情須要一件一件的作，不能多件事一塊兒作。
HappyPack 就能讓 Webpack 把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。
HappyPack 對 file-loader、url-loader 支持的不友好，因此不建議對該 loader 使用。

使用方法以下：

一、HappyPack 插件安裝： npm i -D happypack
二、webpack.base.conf.js 文件對 module.rules 進行配置

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['happypack/loader?id=babel'],
      include: [resolve('src'), resolve('test')],
      exclude: path.resolve(__dirname, 'node_modules')
    },
    {
      test: /\.vue$/,
      use: ['happypack/loader?id=vue']
    }
  ]
}

三、在生產環境 webpack.prod.conf.js 文件進行配置

const HappyPack = require('happypack')
// 構造出共享進程池，在進程池中包含5個子進程
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
  new HappyPack({
    // 用惟一的標識符id，來表明當前的HappyPack是用來處理一類特定的文件
    id: 'babel',
    // 如何處理.js文件，用法和Loader配置中同樣
    loaders: ['babel-loader?cacheDirectory'],
    threadPool: HappyPackThreadPool
  }),
  new HappyPack({
    id: 'vue', // 用惟一的標識符id，來表明當前的HappyPack是用來處理一類特定的文件
    loaders: [
      {
        loader: 'vue-loader',
        options: vueLoaderConfig
      }
    ],
    threadPool: HappyPackThreadPool
  })
]