快捷導(dǎo)航

webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn)

更新時(shí)間：2022年02月09日 15:12:08 作者：李知恩

本文主要介紹了webpack之基礎(chǔ)打包優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下<BR>

前言

webpack至今已經(jīng)發(fā)展了5個(gè)版本，如果你還不會(huì)webpack，那么趕緊學(xué)習(xí)起來吧。webpack是web前端開發(fā)人員必學(xué)的一個(gè)知識(shí)點(diǎn)。本篇文章帶大家一起看看webpack基礎(chǔ)的打包優(yōu)化。話不多說，上酸菜~~~~

優(yōu)化loader

在腳手架項(xiàng)目中,想必各位開發(fā)人員都會(huì)用到預(yù)處理的css。比如sass、stylus、less這些預(yù)處理語(yǔ)言。我們知道使用這些預(yù)處理css必須要在webpack中配置相應(yīng)的loader。

當(dāng)我們配置過多的loader時(shí),各loader之間必定會(huì)轉(zhuǎn)換出大量的代碼,這些代碼會(huì)導(dǎo)致項(xiàng)目在啟動(dòng)和打包時(shí)變得非常慢,這個(gè)時(shí)候就需要我們?nèi)ミM(jìn)行loader的優(yōu)化了。在loader的相關(guān)的配置中,我們可以排除掉第三方包中的文件,減少loader代碼轉(zhuǎn)換的范圍。

module.exports = {
    module: {
        rules: [
            test: /\.css$/, 
            loader: ['style-loader', 'css-loader'],
            include: [resolve('src')],// 只在src文件夾下查找
            // 不去查找的文件夾路徑，node_modules下的代碼是編譯過得，沒必要再去處理一遍
            exclude: /node_modules/ 
        ]
    }
}

壓縮代碼

在webpack中,我們可以使用UglifyjsWebpackPlugin這個(gè)插件來壓縮 js 和css的代碼,從而減小項(xiàng)目打包的體積,提升打包速率。

注意：在開發(fā)環(huán)境我們不需要使用這個(gè)插件~

//安裝插件
npm install uglifyjs-webpack-plugin --save-dev

//在 vue.config.js中
/** 引入uglifyjs-webpack-plugin */
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 
/** 全局變量，當(dāng)前環(huán)境 */ 
const env = process.env.NODE_ENV; 
module.exports = { 
... 
configureWebpack: config => {
  if (env === "production") {
    config.optimization.minimizer.push(
        new UglifyJsPlugin({
          //測(cè)試匹配壓縮的文件
          test: /.js(?.*)?$/i,
          //要被壓縮的文件
          include: //includes/,
          //是否開啟文件緩存
          cache: true,
          //是否開啟多進(jìn)程并行壓縮
          paralleL: true,
          // 使用uglifyOptions移除掉生產(chǎn)環(huán)境中的console
          uglifyOptions: {
            warnings: false,
            compress: {drop_console: true, drop_debugger: true, pure_funcs: ['console.log']}
          }
        }))
  }}}

uglifyjs-webpack-plugin這個(gè)插件還有很多的配置項(xiàng) 具體可以參考uglifyjs-webpack-plugin

注意開啟parallel多進(jìn)程壓縮對(duì)項(xiàng)目打包速度的提升很有幫助

gzip壓縮

除了壓縮 js和css,我們還可以壓縮webpack打包之后的文件。

開啟gzip壓縮后webpack生成的js文件的體積將縮小原來的30%以上。

要開啟gzip壓縮我們也需要用到一個(gè)插件compression-webpack-plugin 并且我們還需要保證服務(wù)端和客戶端都支持gzip。

//安裝插件
npm install compression-webpack-plugin --save-dev

//在 vue.config.js中
/** 引入compression-webpack-plugin */
const CompressionWebpackPlugin = require('compression-webpack-plugin'); 
const productionGzipExtensions = /.(js|css|json|txt|html|icon|svg)(?.*)$/i
module.exports = { 
... 
configureWebpack: config => {
  if (env === "production") {
    config.plugins.push({
      new CompressionWebpackPlugin({
       filename: '[path].gz[query]',
       algorithm: 'gzip',
       test: productionGzipExtensions,
       threshold: 10240,
       minRatio: 0.8
  })
    })
  }}}

compression-webpack-plugin 這個(gè)插件同樣也有很多的配置項(xiàng)，具體參考compression-webpack-plugin

抽離公共依賴包

對(duì)于一些體積較大，不長(zhǎng)更新的包,我們并不需要下載到項(xiàng)目中使用。我們可以選擇使用cdn的方式去進(jìn)行引入，當(dāng)然最好還是將這些庫(kù)放在自己的服務(wù)器下~ webpack允許我們?cè)谕獠恳胍恍┵Y源。

在webpack的配置中有這樣一個(gè)配置項(xiàng) externals:

防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies) 。

從外部加載擴(kuò)展的依賴而不是在項(xiàng)目中獲取。顯然，這肯定能減少項(xiàng)目大小,縮小打包體積。

抽離公共依賴包我們也需要安裝一個(gè)插件html-webpack-plugin。使用這個(gè)插件主要是將外部引入的cdn放到index.html中加載。

如果你的webpack的版本大于4.0那么你無需安裝，webpack4.0已經(jīng)自帶了該插件。本項(xiàng)目中的webpack的版本是4.2.15的因此無需安裝

下面和我一起看看該如何進(jìn)行配置:

// 在 vue.config.js中
const baseUrl = 'https://minturechan.oss-cn-shenzheng.aliyuncs.com/npm'
const cdn = {
  js: [`${baseUrl}vue@2.6.11/dist/vue.min.js`,
    `${baseUrl}vue-router@3.2.0/dist/vue-router.min.js`,
    `${baseUrl}vuex@3.4.0/dist/vuex.min.js`,
    `${baseUrl}view-design@4.0.0/dist/iview.min.js`,
    `${baseUrl}jquery@3.4.1/dist/jquery.min.js`
  ],
  css: [`${baseUrl}view-design@4.0.0/dist/styles/iview.css`]
}
module.exports ={
chainWebpack: config => {
//config.plugin('html')這個(gè)表示獲取 html-webpack-plugin這個(gè)插件~
config.plugin('html').tap(args => {
  if (env === "production") {
    args[0].cdn = cdn
  }
  return args
})
 }
}

在vue.config.js中配置完成后我們還需要在public文件夾下的index.html中引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="icon" href="<%= BASE_URL %>zyd.ico" rel="external nofollow" >
    <title>test</title>
    <% for (var i in
    htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="preload" as="style" />
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
    <% } %>

    <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js){
    %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %>
  </head>
  <body>
    <div id="app">
    <!-- built files will be auto injected -->
    </div>
  </body>
</html>

在index.html中加上如下代碼即可引入外部cdn資源~~