淺談webpack打包之后的文件過大的解決方法

更新時間：2018年03月07日 09:19:51 作者：turuby

這篇文章主要介紹了淺談webpack打包之后的文件過大的解決方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

以前一直使用 create-react-app 這個腳手架進行 react 開發(fā)，后面因為一些自定義的配置，轉(zhuǎn)而使用 webpack 搭建一套自己的腳手架。但是在使用 webpack 打包之后發(fā)現(xiàn)，納尼？怎么文件這么大？？？于是研究了一下如何處理 webpack 打包之后文件太大的情況，簡單記錄下來。

首先配置全局變量

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

//指定環(huán)境，將process.env.NODE_ENV環(huán)境與library關(guān)聯(lián)
 new Webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify('production'),
 }),

優(yōu)化 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 在開發(fā)階段確實很好用，調(diào)試起來很方便，但是在生產(chǎn)環(huán)境下就沒必要部署了。建議在 prod 環(huán)境下關(guān)閉 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 會根據(jù)內(nèi)容去生成 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 文件進行提取，建立一個獨立的文件。這個文件包含一些共用模塊，瀏這樣覽器只在剛開始的時候加載一次，便緩存起來供后續(xù)使用。而不用每次訪問一個新界面時，再去加載一個更大的文件。

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,//只處理比這個值大的資源。按字節(jié)計算
   minRatio: 0.8//只有壓縮率比這個值小的資源才會被處理
})
]

壓縮結(jié)果：

開啟html壓縮，自動添加上面生成的靜態(tài)資源

添加插件 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'
   }),
]

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: