建站
咨詢
售后
建站咨詢
新聞中心
前言
成都創(chuàng)新互聯(lián)是一家專業(yè)提供蓮都企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、H5場景定制、小程序制作等業(yè)務(wù)。10年已為蓮都眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。
在前端應(yīng)用的優(yōu)化中，對加載資源的大小控制極其的重要，大多數(shù)時候我們能做的是在打包編譯的過程對資源進行大小控制、拆分與復(fù)用。
本片文章中主要是基于 webpack 打包，以 React、vue 等生態(tài)開發(fā)的單頁面應(yīng)用來舉例說明如何從 webpack 打包的層面去處理資源以及緩存，其中主要我們需要做的是對 webpack 進行配置的優(yōu)化，同時涉及少量的業(yè)務(wù)代碼的更改。
同時對打包資源的分析可以使用 (webpack-contrib/webpack-bundle-analyzer) 插件，當然可選的分析插件還是很多的，在本文中主要以該插件來舉例分析。
TIP: webpack 版本 @3.6.0
一、打包環(huán)境與代碼壓縮
首先我們有一個最基本的 webpack 配置：
// webpack.config.js
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const PROJECT_ROOT = path.resolve(__dirname, './');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash:4].js'
},
module: {
rules: [
{
test: /\.js[x]?$/,
use: 'babel-loader',
include: PROJECT_ROOT,
exclude: /node_modules/
}
]
},
plugins: [
new BundleAnalyzerPlugin()
],
resolve: {
extensions: ['.js', '.jsx']
},
};
執(zhí)行打包可以看到一個項目的 js 有 1M 以上：
Hash: e51afc2635f08322670b
Version: webpack 3.6.0
Time: 2769ms
Asset Size Chunks Chunk Names
index.caa7.js 1.3 MB 0 [emitted] [big] index這時候只需要增加插件 `DefinePlugin` 與 `UglifyJSPlugin` 即可減少不少的體積，在 plugins 中添加：
// webpack.config.js
...
{
...
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
})
]
...
}
可以看到這時候的打包輸出：
Hash: 84338998472a6d3c5c25
Version: webpack 3.6.0
Time: 9940ms
Asset Size Chunks Chunk Names
index.89c2.js 346 kB 0 [emitted] [big] index
代碼的大小從 1.3M 降到了 346K。
（1）DefinePlugin
DefinePlugin 允許創(chuàng)建一個在編譯時可以配置的全局常量。這可能會對開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用。如果在開發(fā)構(gòu)建中，而不在發(fā)布構(gòu)建中執(zhí)行日志記錄，則可以使用全局常量來決定是否記錄日志。這就是 DefinePlugin 的用處，設(shè)置它，就可以忘記開發(fā)和發(fā)布構(gòu)建的規(guī)則。
在我們的業(yè)務(wù)代碼和第三方包的代碼中很多時候需要判斷 `process.env.NODE_ENV` 來做不同處理，而在生產(chǎn)環(huán)境中我們顯然不需要非 `production` 的處理部分。
在這里我們設(shè)置 `process.env.NODE_ENV` 為 `JSON.stringify('production')`，也就是表示講打包環(huán)境設(shè)置為生產(chǎn)環(huán)境。之后配合 `UglifyJSPlugin` 插件就可以在給生產(chǎn)環(huán)境打包的時候去除部分的冗余代碼。
（2）UglifyJSPlugin
UglifyJSPlugin 主要是用于解析、壓縮 js 代碼，它基于 `uglify-es` 來對 js 代碼進行處理，它有多種配置選項：https://github.com/webpack-contrib/uglifyjs-webpack-plugin。
通過對代碼的壓縮處理以及去除冗余，大大減小了打包資源的體積大小。
二、代碼拆分/按需加載
在如 React 或者 vue 構(gòu)建的單頁面應(yīng)用中，對頁面路由與視圖的控制是由前端來實現(xiàn)的，其對應(yīng)的業(yè)務(wù)邏輯都在 js 代碼中。
當一個應(yīng)用設(shè)計的頁面和邏輯很多的時候，最終生成的 js 文件資源也會相當大。
然而當我們打開一個 url 對應(yīng)的頁面時，實際上需要的并非全部的 js 代碼，所需要的僅是一個主的運行時代碼與該視圖對應(yīng)的業(yè)務(wù)邏輯的代碼，在加載下一個視圖的時候再去加載那部分的代碼。
因此，對這方面可做的優(yōu)化就是對 js 代碼進行按需加載。
懶加載或者按需加載，是一種很好的優(yōu)化網(wǎng)頁或應(yīng)用的方式。這種方式實際上是先把你的代碼在一些邏輯斷點處分離開，然后在一些代碼塊中完成某些操作后，立即引用或即將引用另外一些新的代碼塊。這樣加快了應(yīng)用的初始加載速度，減輕了它的總體體積，因為某些代碼塊可能永遠不會被加載。
在 webpack 中提供了動態(tài)導(dǎo)入的技術(shù)來實現(xiàn)代碼拆分，首先在 webpack 的配置中需要去配置拆分出來的每個子模塊的配置：
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const PROJECT_ROOT = path.resolve(__dirname, './');
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash:4].js',
chunkFilename: '[name].[chunkhash:4].child.js',
},
module: {
rules: [
{
test: /\.js[x]?$/,
use: 'babel-loader',
include: PROJECT_ROOT,
exclude: /node_modules/
}
]
},
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
],
resolve: {
extensions: ['.js', '.jsx']
},
};
其中主要需要定義的則是 `output` 中的 `chunkFilename`，它是導(dǎo)出的拆分代碼的文件名，這里給它設(shè)置為 `[name].[chunkhash:4].child.js`，其中的 `name` 對應(yīng)模塊名稱或者 id，`chunkhash` 是模塊內(nèi)容的 hash。
之后在業(yè)務(wù)代碼中 webpack 提供了兩種方式來動態(tài)導(dǎo)入：
- `import('path/to/module') -> Promise`，
- `require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)`
對于最新版本的 webpack 主要推薦使用 `import()` 的方式（注意：import 使用到了 Promise，因此需要確保代碼中支持了 Promise 的 polyfill）。
// src/index.js
function getComponent() {
return import(
/* webpackChunkName: "lodash" */
'lodash'
).then(_ => {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}).catch(error => 'An error occurred while loading the component');
}
getComponent().then(component => {
document.body.appendChild(component);
})
可以看到打包的信息：
Hash: d6ba79fe5995bcf9fa4d
Version: webpack 3.6.0
Time: 7022ms
Asset Size Chunks Chunk Names
lodash.89f0.child.js 85.4 kB 0 [emitted] lodash
index.316e.js 1.96 kB 1 [emitted] index
[0] ./src/index.js 441 bytes {1} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module可以看到打包出來的代碼生成了 `index.316e.js` 和 `lodash.89f0.child.js` 兩個文件，后者則是通過 `import` 來實現(xiàn)拆分的。
`import` 它接收一個 `path` 參數(shù)，指的是該子模塊對于的路徑，同時還注意到其中可以添加一行注釋 `/* webpackChunkName: "lodash" */`，該注釋并非是無用的，它定義了該子模塊的 name，其對應(yīng)與 `output.chunkFilename` 中的 `[name]`。
`import` 函數(shù)返回一個 Promise，當異步加載到子模塊代碼是會執(zhí)行后續(xù)操作，比如更新視圖等。
（1）React 中的按需加載
在 React 配合 React-Router 開發(fā)中，往往就需要代碼根據(jù)路由按需加載的能力，下面是一個基于 webpack 代碼動態(tài)導(dǎo)入技術(shù)實現(xiàn)的 React 動態(tài)載入的組件：
import React, { Component } from 'react';
export default function lazyLoader (importComponent) {
class AsyncComponent extends Component {
state = { Component: null }
async componentDidMount () {
const { default: Component } = await importComponent();
this.setState({
Component: Component
});
}
render () {
const Component = this.state.Component;
return Component
? 在 `Route` 中：
import('./Home'))} /> import('./About'))} /> import('./NotFound'))} />
在 `Route` 中渲染的是 `lazyLoader` 函數(shù)返回的組件，該組件在 mount 之后會去執(zhí)行 `importComponent` 函數(shù)（既：`() => import('./About')`）動態(tài)加載其對于的組件模塊（被拆分出來的代碼），待加載成功之后渲染該組件。
使用該方式打包出來的代碼：
Hash: 02a053d135a5653de985
Version: webpack 3.6.0
Time: 9399ms
Asset Size Chunks Chunk Names
0.db22.child.js 5.82 kB 0 [emitted]
1.fcf5.child.js 4.4 kB 1 [emitted]
2.442d.child.js 3 kB 2 [emitted]
index.1bbc.js 339 kB 3 [emitted] [big] index三、抽離 Common 資源
（1）第三方庫的長緩存
首先對于一些比較大的第三方庫，比如在 React 中用到的 react、react-dom、react-router 等等，我們不希望它們被重復(fù)打包，并且在每次版本更新的時候也不希望去改變這部分的資源導(dǎo)致在用戶端重新加載。
在這里可以使用 webpack 的 CommonsChunkPlugin 來抽離這些公共資源；
CommonsChunkPlugin 插件，是一個可選的用于建立一個獨立文件(又稱作 chunk)的功能，這個文件包括多個入口 chunk 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存起來到緩存中供后續(xù)使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。
首先需要在 entry 中新增一個入口用來打包需要抽離出來的庫，這里將 `'react', 'react-dom', 'react-router-dom', 'immutable'` 都給單獨打包進 `vendor` 中；
之后在 plugins 中定義一個 `CommonsChunkPlugin` 插件，同時將其 `name` 設(shè)置為 `vendor` 是它們相關(guān)聯(lián)，再將 `minChunks` 設(shè)置為 `Infinity` 防止其他代碼被打包進來。
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const PROJECT_ROOT = path.resolve(__dirname, './');
module.exports = {
entry: {
index: './src0/index.js',
vendor: ['react', 'react-dom', 'react-router-dom', 'immutable']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash:4].js',
chunkFilename: '[name].[chunkhash:4].child.js',
},
module: {
rules: [
{
test: /\.js[x]?$/,
use: 'babel-loader',
include: PROJECT_ROOT,
exclude: /node_modules/
}
]
},
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
],
resolve: {
extensions: ['.js', '.jsx']
},
};
運行打包可以看到：
Hash: 34a71fcfd9a24e810c21
Version: webpack 3.6.0
Time: 9618ms
Asset Size Chunks Chunk Names
0.2c65.child.js 5.82 kB 0 [emitted]
1.6e26.child.js 4.4 kB 1 [emitted]
2.e4bc.child.js 3 kB 2 [emitted]
index.4e2f.js 64.2 kB 3 [emitted] index
vendor.5fd1.js 276 kB 4 [emitted] [big] vendor
可以看到 `vendor` 被單獨打包出來了。
當我們改變業(yè)務(wù)代碼時再次打包：
Hash: cd3f1bc16b28ac97e20a
Version: webpack 3.6.0
Time: 9750ms
Asset Size Chunks Chunk Names
0.2c65.child.js 5.82 kB 0 [emitted]
1.6e26.child.js 4.4 kB 1 [emitted]
2.e4bc.child.js 3 kB 2 [emitted]
index.4d45.js 64.2 kB 3 [emitted] index
vendor.bc85.js 276 kB 4 [emitted] [big] vendor
vendor 包同樣被打包出來的，然而它的文件 hash 卻發(fā)生了變化，這顯然不符合我們長緩存的需求。
這是因為 webpack 在使用 CommoChunkPlugin 的時候會生成一段 runtime 代碼（它主要用來處理代碼模塊的映射關(guān)系），而哪怕沒有改變 vendor 里的代碼，這個 runtime 仍然是會跟隨著打包變化的并且打入 verdor 中，所以 hash 就會開始變化了。解決方案則是把這部分的 runtime 代碼也單獨抽離出來，修改之前的 `CommonsChunkPlugin` 為：
// webpack.config.js
...
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'runtime'],
minChunks: Infinity,
}),
...執(zhí)行打包可以看到生成的代碼中多了 `runtime` 文件，同時即使改變業(yè)務(wù)代碼，vendor 的 hash 值也保持不變了。
當然這段 `runtime` 實際上非常短，我們可以直接 inline 在 html 中，如果使用的是 `html-webpack-plugin` 插件處理 html，則可以結(jié)合 [`html-webpack-inline-source-plugin`](DustinJackson/html-webpack-inline-source-plugin) 插件自動處理其 inline。
（2）公共資源抽離
在我們打包出來的 js 資源包括不同入口以及子模塊的 js 資源包，然而它們之間也會重復(fù)載入相同的依賴模塊或者代碼，因此可以通過 CommonsChunkPlugin 插件將它們共同依賴的一些資源打包成一個公共的 js 資源。
// webpack.config.js
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'runtime'],
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
// ( 公共chunk(commnons chunk) 的名稱)
name: "commons",
// ( 公共chunk 的文件名)
filename: "commons.[chunkhash:4].js",
// (模塊必須被 3個 入口chunk 共享)
minChunks: 3
})
],
可以看到這里增加了 `commons` 的一個打包，當一個資源被三個以及以上 chunk 依賴時，這些資源會被單獨抽離打包到 `commons.[chunkhash:4].js` 文件。
執(zhí)行打包，看到結(jié)果如下：
Hash: 2577e42dc5d8b94114c8
Version: webpack 3.6.0
Time: 24009ms
Asset Size Chunks Chunk Names
0.2eee.child.js 90.8 kB 0 [emitted]
1.cfbc.child.js 89.4 kB 1 [emitted]
2.557a.child.js 88 kB 2 [emitted]
vendor.66fd.js 275 kB 3 [emitted] [big] vendor
index.688b.js 64.2 kB 4 [emitted] index
commons.a61e.js 1.78 kB 5 [emitted] commons
卻發(fā)現(xiàn)這里的 `commons.[chunkhash].js` 基本沒有實際內(nèi)容，然而明明在每個子模塊中也都依賴了一些相同的依賴。
借助 webpack-bundle-analyzer 來分析一波：
可以看到三個模塊都依賴了 `lodash`，然而它并沒有被抽離出來。
這是因為 CommonsChunkPlugin 中的 chunk 指的是 entry 中的每個入口，因此對于一個入口拆分出來的子模塊（children chunk）是不生效的。
可以通過在 CommonsChunkPlugin 插件中配置 `children` 參數(shù)將拆分出來的子模塊的公共依賴也打包進 `commons` 中：
// webpack.config.js
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'runtime'],
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
// ( 公共chunk(commnons chunk) 的名稱)
name: "commons",
// ( 公共chunk 的文件名)
filename: "commons.[chunkhash:4].js",
// (模塊必須被 3個 入口chunk 共享)
minChunks: 3
}),
new webpack.optimize.CommonsChunkPlugin({
// (選擇所有被選 chunks 的子 chunks)
children: true,
// (在提取之前需要至少三個子 chunk 共享這個模塊)
minChunks: 3,
})
],
查看打包效果:
其子模塊的公共資源都被打包到 `index` 之中了，并沒有理想地打包進 `commons` 之中，還是因為 `commons` 對于的是 entry 中的入口模塊，而這里并未有 3 個 entry 模塊共用資源；
在單入口的應(yīng)用中可以選擇去除 `commons`，而在子模塊的 `CommonsChunkPlugin` 的配置中配置 `async` 為 `true`：
// webpack.config.js
plugins: [
new BundleAnalyzerPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
}),
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
output: {
comments: false,
beautify: false,
},
mangle: {
keep_fnames: true
},
compress: {
warnings: false,
drop_console: true
},
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor', 'runtime'],
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
// (選擇所有被選 chunks 的子 chunks)
children: true,
// (異步加載)
async: true,
// (在提取之前需要至少三個子 chunk 共享這個模塊)
minChunks: 3,
})
],
查看效果：
子模塊的公共資源都被打包到 `0.9c90.child.js` 中了，該模塊則是子模塊的 commons。
四、tree shaking
tree shaking 是一個術(shù)語，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴于 ES2015 模塊系統(tǒng)中的靜態(tài)結(jié)構(gòu)特性，例如 import 和 export。這個術(shù)語和概念實際上是興起于 ES2015 模塊打包工具 rollup。
在我們引入一個依賴的某個輸出的時候，我們可能需要的僅僅是該依賴的某一部分代碼，而另一部分代碼則是 `unused` 的，如果能夠去除這部分代碼，那么最終打包出來的資源體積也是可以有可觀的減小。
首先，webpack 中實現(xiàn) tree shaking 是基于 webpack 內(nèi)部支持的 es2015 的模塊機制，在大部分時候我們使用 babel 來編譯 js 代碼，而 babel 會通過自己的模塊加載機制處理一遍，這導(dǎo)致 webpack 中的 tree shaking 處理將會失效。因此在 babel 的配置中需要關(guān)閉對模塊加載的處理：
// .babelrc
{
"presets": [
[
"env", {
"modules": false,
}
],
"stage-0"
],
...
}然后我們來看下 webpack 是如何處理打包的代碼，舉例有一個入口文件 `index.js` 和一個 `utils.js` 文件：
// utils.js
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
```
```js
// index.js
import { cube } from './utils.js';
console.log(cube(10));
```
打包出來的代碼：
```
// index.bundle.js
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export square */
/* harmony export (immutable) */ __webpack_exports__["a"] = cube;
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
可以看到僅有 `cube` 函數(shù)被 `__webpack_exports__` 導(dǎo)出來，而 `square` 函數(shù)被標記為 `unused harmony export square`，然而在打包代碼中既是 `square` 沒有被導(dǎo)出但是它仍然存在與代碼中，而如何去除其代碼則可以通過添加 `UglifyjsWebpackPlugin` 插件來處理。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
文章標題：淺談如何使用webpack優(yōu)化資源
鏈接分享：http://www.ef60e0e.cn/article/ghoesj.html
