webpack打包之後的檔案過大的解決方法

sturuby發表於2018-03-05
Web

以前一直使用create-react-app這個腳手架進行react開發，後面因為一些自定義的配置，轉而使用webpack搭建一套自己的腳手架。但是在使用webpack打包之後發現，納尼？怎麼檔案這麼大？？？ 於是研究了一下如何處理webpack打包之後檔案太大的情況，簡單記錄下來。

首先配置全域性變數

首先，通過指定環境，告訴webpack我們當前處於production環境中，要按照production的方式去打包。

 //指定環境，將process.env.NODE_ENV環境與library關聯
 new Webpack.DefinePlugin({
	'process.env.NODE_ENV': JSON.stringify('production'),
 }),
複製程式碼

優化devtool中的source-map.

dev-tool提供了很多種選項，用來增強我們debug的能力，我們熟知的有：source-map,inline-source-map,cheap-source-map等等。詳細的用法可以參考 Devtool官方文件， Devtool配置對比， webpack sourcemap 選項多種模式的一些解釋， https://webpack.github.io/docs/configuration.html#devtool 如果你的檔案在打包之後突然變成好幾M，那麼不用想，肯定是因為source-map的原因。source-map在開發階段確實很好用，除錯起來很方便，但是在生產環境下就沒必要部署了。 建議在prod環境下關閉source-map。

剝離css檔案，單獨打包

安裝webpack外掛extract-text-webpack-plugin。 npm install extract-text-webpack-plugin --save-dev。 使用方法：

plugins:[
 new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]
複製程式碼

這裡使用了contenthash，webpack會根據內容去生成hash值。

使用UglifyJSPlugin壓縮。

通過UglifyJSPlugin可以壓縮我們的*.js檔案。 安裝方法: npm install uglifyjs-webpack-plugin --save-dev。 用法： UglifyJSPlugin詳細用法

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  plugins: [
     new UglifyJSPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    warnings: false
                },
            },
            cache: true,
        }),
  ]
}
複製程式碼

提取公共依賴

使用CommonsChunkPlugin外掛，將多個js檔案進行提取，建立一個獨立的檔案。這個檔案包含一些共用模組，瀏這樣覽器只在剛開始的時候載入一次，便快取起來供後續使用。而不用每次訪問一個新介面時，再去載入一個更大的檔案。

 entry:{
	app:'./entry',
	vendor:['react','other-lib'],
 },
 plugins:[
	 new Webpack.optimize.CommonsChunkPlugin({
	     name: 'vendor',
	 }),
 ]
複製程式碼

開啟gzip壓縮

我們使用compression-webpack-plugin外掛進行壓縮。 安裝：npm install compression-webpack-plugin --save-dev。 compression-webpack-plugin 詳細用法 使用：

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
	 asset: '[path].gz[query]', //目標資源名稱。[file] 會被替換成原資源。[path] 會被替換成原資源路徑，[query] 替換成原查詢字串
     algorithm: 'gzip',//演算法
     test: new RegExp(
          '\\.(js|css)$'    //壓縮 js 與 css
     ),
     threshold: 10240,//只處理比這個值大的資源。按位元組計算
     minRatio: 0.8//只有壓縮率比這個值小的資源才會被處理
})
]
複製程式碼

壓縮結果：

這裡寫圖片描述

這裡寫圖片描述

開啟html壓縮，自動新增上面生成的靜態資源

新增外掛html-webpack-plugin 安裝： npm install html-webpack-plugin --save-dev 用法：

plugins:[
  new HtmlWebpackPlugin({
      title: '',
         template: __dirname + '/../public/index.html',
         minify: {
             removeComments: true,
             collapseWhitespace: true,
             removeRedundantAttributes: true,
             useShortDoctype: true,
             removeEmptyAttributes: true,
             removeStyleLinkTypeAttributes: true,
             keepClosingSlash: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true,
         },
         chunksSortMode:'dependency'
     }),
]
複製程式碼

相關文章