快捷導(dǎo)航

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

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

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

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

首先配置全局變量

首先，通過指定環(huán)境，告訴 webpack 我們當(dāng)前處于 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 提供了很多種選項(xiàng)，用來增強(qiáng)我們 debug 的能力，我們熟知的有： source-map , inline-source-map , cheap-source-map 等等。詳細(xì)的用法可以參考Devtool官方文檔，Devtool配置對(duì)比， webpack sourcemap 選項(xiàng)多種模式的一些解釋， https://webpack.github.io/docs/configuration.html#devtool 如果你的文件在打包之后突然變成好幾M，那么不用想，肯定是因?yàn)?source-map 的原因。 source-map 在開發(fā)階段確實(shí)很好用，調(diào)試起來很方便，但是在生產(chǎn)環(huán)境下就沒必要部署了。建議在 prod 環(huán)境下關(guān)閉 source-map 。

剝離css文件，單獨(dú)打包

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

plugins:[
 new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]

這里使用了 contenthash ， webpack 會(huì)根據(jù)內(nèi)容去生成 hash 值。

使用 UglifyJSPlugin 壓縮。

通過 UglifyJSPlugin 可以壓縮我們的 *.js 文件。安裝方法: npm install uglifyjs-webpack-plugin --save-dev 。用法： UglifyJSPlugin詳細(xì)用法

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 插件，將多個(gè) js 文件進(jìn)行提取，建立一個(gè)獨(dú)立的文件。這個(gè)文件包含一些共用模塊，瀏這樣覽器只在剛開始的時(shí)候加載一次，便緩存起來供后續(xù)使用。而不用每次訪問一個(gè)新界面時(shí)，再去加載一個(gè)更大的文件。

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

開啟gzip壓縮

我們使用 compression-webpack-plugin 插件進(jìn)行壓縮。安裝： npm install compression-webpack-plugin --save-dev 。 compression-webpack-plugin 詳細(xì)用法使用：

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
 asset: '[path].gz[query]', //目標(biāo)資源名稱。[file] 會(huì)被替換成原資源。[path] 會(huì)被替換成原資源路徑，[query] 替換成原查詢字符串
   algorithm: 'gzip',//算法
   test: new RegExp(
     '\\.(js|css)$'  //壓縮 js 與 css
   ),
   threshold: 10240,//只處理比這個(gè)值大的資源。按字節(jié)計(jì)算
   minRatio: 0.8//只有壓縮率比這個(gè)值小的資源才會(huì)被處理
})
]

壓縮結(jié)果：

開啟html壓縮，自動(dòng)添加上面生成的靜態(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'
   }),
]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: