webpack性能優化 | 8月更文挑戰

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰

首先說明優化目的：css

一、加速打包時間html

二、減小打包後的體積vue

1、加速打包時間

要加速打包時間，就須要先縮⼩⽂件搜索範圍，通常影響總體打包的時間主要是loader和plugin兩個的編譯構建的過程。須要先壓縮，再優化，能夠減小不少打包時間。因此咱們要先減小搜索文件的過程，提早編譯和緩存等幾個方法實現node

一、優化loader查找文件範圍react

能夠使用test、include、exclude三個配置項來縮⼩loader的處理範圍，推薦includejquery

//string
    include: path.resolve(__dirname, "./src"),
//array
include: [
     path.resolve(__dirname, 'app/styles'),
     path.resolve(__dirname, 'vendor/styles')
]
複製代碼

注：exclude 優先級要優於 include 和 test ，因此三個都配置時， exclude 會優先於其餘兩個配置webpack

二、優化resolve.modules配置web

reslove.modules用於配置webpack打包後在哪一個目錄下查找模塊，默認是node_modules，能夠配置：npm

module.exports={
     resolve:{
         modules: [path.resolve(__dirname, "./node_modules")]
     }
}
複製代碼

三、優化resolve.alias配置json

resolve.alias主要是配置別名，把原路徑映射爲一個新配置的路徑，咱們能夠直接指定文件路徑，避免查找的耗時

alias: {
     "@": path.join(__dirname, "./pages"),
     react: path.resolve(
         __dirname,
         "./node_modules/react/umd/react.production.min.js"
     ),
     "react-dom": path.resolve(
         __dirname,
         "./node_modules/react-dom/umd/react-dom.production.min.js"
     )
},
resolve: {
     alias: {
         "@assets": path.resolve(__dirname, "../src/images/"),
     },
}

 //html-css中使⽤
 .sprite3 {
     background: url("~@assets/s3.png");
 }
複製代碼

四、優化resolve.extensions配置

resolve.extensions在導入語句沒寫入文件後綴時，webpack會自動帶入後綴，並嘗試查找文件是否存在

默認配置：extensions:['.js','.json','.jsx','.ts']

因此咱們在開發過程當中，儘可能帶入後綴，減小查找文件的時間

五、使用cache緩存

webpack打包的核心是js文件的打包，js使用babel-loader。因此打包時間長主要是babel-loader執行太慢致使的，這時須要使用exclude和include來準確的肯定轉換內容的範圍，並減小重複文件的轉換，形成打包後文件體積過大，也會增大編譯速度。

使用cacheDirectory配置給babel編譯時指定的目錄，而且用於緩存加載的結果，可是默認是false，須要手動設置爲true，默認的緩存目錄是node_modules/.cache/babel-loader ，可是若是在任何根⽬錄下都沒有找到 node_modules ⽬錄，就會降級回退到操做系統默認的臨時⽂件⽬錄。

rules: [
     {
         test: /\.js$/,
         loader: 'babel-loader',
         options: {
             cacheDirectory: true
         },
     }
];
複製代碼

2、減小打包後的體積

除了構建以外，壓縮打包後的體積也比較重要，除了上面提到的cache還能夠使用terser-webpack-plugin的時候配置使用多線程和緩存實現。

題外話：在2017年的時候，剛會vue一年，由於項目中必須使用jq，打包後體積太大，成爲當時一大難題，弄了一兩天才解決，真的是各個方面都要考慮到，解決辦法下面會提到

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
     optimization: {
         minimizer: [
             new TerserPlugin({
                 cache: true, // 開啓緩存
                 parallel: true // 多線程
             })
         ]
     }
};
複製代碼

還能夠使用cdn地址或者本身服務器的地址存放一些靜態資源文件，這樣在打包的時候就不須要打包一大堆東西了，能夠很大程度的減小打包後的體積，好比：超大的背景圖片，jq地址使用cdn，echarts圖表類的等，

若是須要在使用的時候能夠經過import的方法引入jq(import $ from 'jquery')或echarts而且不會對其打包，能夠嘗試配置externals

//webpack.config.js
module.exports = {
     externals: {
         //jquery經過script引⼊以後，全局中即有了 jQuery 變量
         'jquery': 'jQuery'
     }
}
複製代碼

CSS的壓縮

使用optimize-css-assets-webpack-plugin，是一個壓縮css的插件，默認引擎是cssnano，css-loader已經集成了cssnano，能夠使用optimize-css-assets-webpack-plugin來自定義規則

//安裝命令
npm install cssnano -D
npm i optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
new OptimizeCSSAssetsPlugin({
     cssProcessor: require("cssnano"), // 能夠指定引擎，默認是 cssnano
     cssProcessorOptions: {
         discardComments: { removeAll: true }
     }
})
複製代碼

HTML的壓縮

//使用html-webpack-plugin
new htmlWebpackPlugin({
     title: "京東商城",
     template: "./index.html",
     filename: "index.html",
     minify: {
         // 壓縮HTML⽂件
         removeComments: true, //刪掉HTML裏的註釋
         collapseWhitespace: true, // 刪除空⽩符和換⾏符
         minifyCSS: true // 壓縮內聯css
     }
})
複製代碼

JS的壓縮

雖然webpack會自動壓縮js，可是仍是推薦使用terser-webpack-plugin，也是webpack官方維護的插件。

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
     optimization: {
         minimizer: [new TerserPlugin(
             parallel: true //使用並開啓多線程減小壓縮的耗時
         )]
     }
};
複製代碼