有關webpack前端效能優化（詳細教學）
- 亚连原創
- 2018-06-22 17:08:132213瀏覽
webpack是近期最火紅的一款模組載入器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都當作模組來使用和處理。這篇文章主要要為大家總結介紹了關於webpack學習教學之前端效能優化的相關資料，需要的朋友可以參考下。
前言
#曾幾何時，我們是如上圖的方式引入JS資源的，相信現在很少遇見了。近年來Web前端開發領域正朝著規範開發的方向演進。體現在以下兩點：
1、MVC研發架構。多多好處（邏輯清晰，程式著重資料與表現分離，可讀性強，利於規避與排查問題...）
2、建構工具層出不窮。多多好處（提升團隊協作，以及工程維，避免人工處理瑣碎而重複的工作）
#模組化開發
將前端性能優化理論落地，代碼壓縮，合併，緩存控制，提取公共代碼等
其他的還包括比如你可以用ES 6 或CoffeeScript寫源碼，然後構建出瀏覽器支持的ES5
所以，前端這麼好玩，如果還有專案沒有前後端分開的話，真的是守舊過頭了。
主流建置工具
市面上有許多建置工具，包括Grunt、Gulp、browserify等，這些和WebPack都是打包工具。但WebPack同時也具備以下特點：
#比較Grunt，WebPack除了具備豐富的插件外，同時也附有一套載入（Loader）系統。使它支援多種規範的載入方式，包括ES6、CommonJS、AMD等方式，這是Grunt、Gulp所不具備的。
從程式碼混淆的角度來看，WebPack更加的極致
程式碼分片為處理單元（而非檔案），使得檔案的分片更為靈活。
P.S.這裡只做簡單的比較，不論孰優孰劣。其實工具都能滿足需求，關鍵在於看怎麼用，工具的使用背後是對前端效能優化的理解程度。
引言
最近在用webpack優化首屏載入效能，透過幾種外掛程式之後我們上線前後的速度快了一倍，在此就簡單的分享下吧，先上個優化前後首屏渲染的比較圖。
可以看到總下載時間從3800ms縮短到1600ms。
我們在用webpack時一般都會選擇多入口檔吧，為的就是將自己的原始碼跟第三方函式庫程式碼分開。這是之前的程式碼，
entry: {
entry: './src/main.js',
vendor: ['vue', 'vue-router', 'vuex', 'element-ui','echarts']
},
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}echarts非常大，所以打包時的vendor.js大概為1.2MB（經過gzip壓縮之後），而且首頁沒有用到echarts，所以我之後使用了externals將第三方函式庫以cdn的方式去引入，下面是優化過的程式碼
entry: {
entry: './src/main.js',
vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
},
// 这里的output为base中的output，不是生产的output
output: {
path: config.build.assetsRoot,
filename: '[name].js',
libraryTarget: "umd",
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
externals: {
echarts: 'echarts',
_: 'lodash'
},
#這就是優化前後的比較。
然後我們要到html以script標籤的形式去引externals中的cdn。之後就可以在相應的文件中import了，他的好處是不管你在多少vue文件中引用多少次，他都不會打包到所有的trunk(這裡的trunk'指的是按需加載，一會詳細說明)中，這是用webpack-bundle-analyzer外掛程式展示的效果。
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
new BundleAnalyzerPlugin({
// 可以是`server`，`static`或`disabled`。
// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下，会生成带有报告的单个HTML文件。
// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑，将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`，`parsed`或者`gzip`中的一个。
// 有关更多信息，请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson（）方法的选项。
// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
// 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' //日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
})
我們會看到，沒用externals和用了externals後所有的js中都不會出現類似echarts和lodash的庫出現(就算你import一萬次他都不會打包一次，厲害吧~~)。
對於externals再說兩點－
1.externals中的key是import中使用的
import lodash from "_"; import echarts from "echarts";
2.externals中的value是window下呼叫的
然後我們再來聊聊為什麼output使用trunkhash不用trunk，這是為了持久化快取。簡單說下兩者的差異－
trunk：每次build之後的版本，就是說所有的build之後的文件hash值一致,例如我只改了一個文件，最後所有的文件hash都會變，這樣所有的檔案都不會走cache，這樣快取就失去了意義。
trunkhash：根據每個檔案產生不同的hash值，當檔案變化時hash會改變且只會改變對應的檔案
然后我们肯定是要用到CommonsChunkPlugin，这个插件是用来抽取公共代码的，基本上99%的配置都是长这样子或者类似这样子用两个不同的commonschunkPlugin，但这从某方面来说并没有实现真正意义上的持久化缓存，这个一会我会通过webpack打包原理来详细解释其中的原因。。。。。。
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor','manifest']
})在没用这个插件之前，我们的main.js和vendor.js会是这样子。。。
大家会看到我们这两个文件会有公共的部分，比如vue和element-ui，所以我们要抽取公共代码到vendor中，所以我们可以先这样配置
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
}),但这样的话虽然可以提取公共代码，但我们会把runtime（webpack运行时的代码，一会在打包原理中会再次提到）也放到vendor中，这里面会维护一个trunk的文件列表，类似于这样，就是说我们改任意的代码，这个table里面的hash会变，所以vendor的hash也会变
，所以这没有实现真正的持久化缓存。这个hash table是按需缓存的打包出来的trunk包，一般都是通过require.ensure(就是vue-router中配置的page对应页面，按需加载)
所以我们就把name改为names，就是上面那个配置。因为使用这个插件，我们会把公共代码抽到第一个name中，把runtime放到最后一个name中，也就是我们所谓的“manifest”文件。
并且这个文件会比较小，通常都是2kb左右，所以build后会生成一个script标签，但这样的话就多了一个http请求，所以我们可以用另外一个插件（InlineManifestWebpackPlugin）将manifest.js内联进去。就会长这样子
再回到我们的CommonsChunkPlugin，现在我们随便改任何已存在的文件，vendor.js的hash都不会变，是的，貌似这就实现了持久化缓存。但是当我们新增一个模块，并且在入口文件中import一下，我们的vendor就会跟main一起变。很奇怪对吧，我们明明已经做了自己的源码跟第三方库分离，为什么vendor还会变（到现在应该没有任何一篇博客对此进行详细的说明）。下面我就详细的给大家解释下我的看法，如果大家发现有不对的地方还请指正。
再解释为什么之前，我们先简单了解下webpack的打包规则。
webpack一个entry对应一个bundle，这个bundle包括入口文件和其依赖的模块。其他按需加载的则打包成其他的bundle。还有一个比较重要的文件时manifest，它是最先加载的，负责打包其他的bundle并按需加载和执行。
manifest是一个自执行函数，熟悉angular的同学看第一行应该很了解，因为anguar1.3版本的源码中启动就是angular.bootstrap，对，这里也是一样。里面的modules变量就是对应模块函数，它是webpack处理的基本单位，就是说对应打包前的一个文件
这是js源文件，
这是打包后的文件，
所有的模块函数索引都是连续的（每个js文件生成一个trunkid！！！！！），像这种 /* 4 */ 对应的就是js文件，他通过打包就变成了一个个trunkid，仔细看会看到咱们打包前js文件里的export和require依赖都会统一转换成webpack模块。咱们说的webpackJsonp就是除manifest之外打包其他的文件的函数体。
简单说下main吧，这个图的trunkid是连续的，为了在一张图上显示，我截掉了trunk3-7.
这里面一共有三个参数，第一个是我当前文件的trunkid，它是唯一标识符，就是指main的trunkid，第二个就是打包的所有文件的模块函数，第三个是我要立即执行的trunkid模块函数。
ok，介绍这些就足够了。
然后我们再回过头来看看为什么我们所谓的commonschunkPlugin会变。刚才说过，有几个js就有几个trunkid。
所以當我們新加一個js並引入到main入口時，webpack再次打包，我的main檔案會多一個模組函數，剛剛說過trunkid是依次遞增的而且不會重複。所以對應的vendor的id會 1，就是這麼細微的變化導致hash變了。
#大家仔細看，這兩個vendor都是10272行，唯一的不同就是我要自執行這個vendor函式庫，這裡我引用的jquery，所以這個檔案只有jquery，自執行一定要有模組函數，trunkid 1，所以hash會變。我們再好好回憶一下，其實這也說明了這個插件的意義，我就是要抽出公共的庫，OK，這個插件做到了，但是因為webpack打包機制，不同文件生成不同turnkid，所以這是美中不足的一點。再回想一下，我們通常不會隨便修改main.js的，所以從另一個角度上來說這就是實作了持久化快取。但我如果就是想保持vendor的hash不變怎麼辦呢？
這段程式碼就可以實現，沒錯，如果你對vue-cli瞭如指掌，這就是vue-cli的官方demo，至於為什麼可以，這個我後續會跟大家解釋（實在寫不動了。。。）。
最後再跟大家介紹一個超級好用的東西，就是cdn。我們現在的需求是想讓圖片走cdn，讓js走線上路徑，但官方的解釋是透過修改config檔做cdn變化，這樣做的話我的所有輸出都會走cdn，那所有的ajax請求就跨域了呀。
一開始我的解決方案是，在原始檔中挨個替換，這樣會比較慢，更重要的是，cdn圖片也是有hash值的，當我以後替換圖片時，還得重新改對應的hash。有什麼方法能讓他自動去獲取hash呢。
沒錯，我們需要在url-loader中單獨設定cdn，做到js存取線上路徑，靜態資源使用cdn，兩者互不影響。
簡單提醒一下，url-loader不能偵測到js中的background，所以我們凡是在js中引用的位址，必須在外面先import這張圖片，url -loader才會解析並打包。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是有關webpack前端效能優化（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！