webpack打包分離第三方庫和業務代碼


使用webpack打包工程,通常會需要分離第三方類庫和應用本身的代碼,因為第三方類庫更新頻率不高,這樣瀏覽器可以直接從緩存讀,不需要項目每次上線再獲取一次。

以react為例,正常情況下,最初是這么配置的:

復制代碼
 1 module.exports = {  2  entry: {  3 app: "./src/App.js",  4 vendor: ["react", "react-dom"]  5  },  6  output: {  7 path: __dirname + "/dist",  8 filename: "[name].[chunkhash:8].js",  9 publicPath: "/dist/" 10  }, 11  ... 12  plugins: [ 13  ... 14 new webpack.optimize.CommonsChunkPlugin({ 15 names: ["vendor"] 16  }) 17  ] 18 };
復制代碼

然后我們會發現,一旦應用代碼發生變化,重新打包后app.js和vendor.js的hash值都會發生變化,具體原因大致就是由於app.js變了,webpack會生成一段runtime注入vendor.js,導致vendor.js也變了(因為兩者有關聯)。

解決方法目前我知道二種比較好。

第一種是利用webpack.DllPlugin,具體使用方法網上很多,配置稍微有點復雜,這里不列舉了。

第二種方法是利用CommonsChunkPlugin生成一個專門跟蹤vendor.js變化的js文件,一般可以取名manifest.js,具體配置如下:

復制代碼
 1 module.exports = {  2  entry: {  3 app: "./src/App.js",  4 vendor: ["react", "react-dom"]  5  },  6  output: {  7 path: __dirname + "/dist",  8 filename: "[name].[chunkhash:8].js",  9 publicPath: "/dist/" 10  }, 11  ... 12  plugins: [ 13  ... 14 new webpack.optimize.CommonsChunkPlugin({ 15 names: ["vendor", "manifest"] 16  }) 17  ] 18 };
復制代碼

其中CommonsChunkPlugin的配置還能這么配:

復制代碼
 1 module.exports = {  2  ...  3  plugins: [  4  ...  5 new webpack.optimize.CommonsChunkPlugin({  6 names: ["vendor"]  7  }),  8 new webpack.optimize.CommonsChunkPlugin({  9 names: ["manifest"], 10 chunks: ["vendor"] 11  }) 12  ] 13 };
復制代碼

完成后我們修改應用代碼,再重新打包,結果vendor.js的hash值不再發生變化。

我看過的網上的教程,基本上都到這里就結束了。然而當我運行代碼,想查看效果,結果卻是空白頁,chrome下有報錯:

???

當時真是一下就懵了。google、stackoverflow搜了好久都沒找到滿意的答案(可能是搜商比較低)。

后來我無意中去看生成的index.html,發現里面插入的js順序是這樣的:

然后再打開chrome里的第一行報錯:

發現報錯是從app.js開始的。正常情況下應該是app.js引用vendor.js中的方法,即app.js的加載順序應該在vendor.js之后,但現在順序卻顛倒了,會不會是這個原因造成的?

於是我們手動修改index.html,交換一下app.js和vendor.js的加載順序。再重新運行代碼,結果顯示正確了。

看來是chunks注入順序混亂導致的,那有沒有方法按照正確的引用順序注入呢?這就要看html-webpack-plugin插件了。

原本關於html-webpack-plugin插件我們是這么配的:

復制代碼
 1 module.exports = {  2  ...  3  plugins: [  4  ...  5 new HtmlPlugin({  6 filename: "../index.html",  7 template: __dirname + "/src/templates/index.html"  8  })  9  ] 10 };
復制代碼

而html-webpack-plugin中有個配置項叫chunksSortMode,它可以指定chunks注入的順序,其可以配置為:"none" | "auto" | "dependency" | {function}。默認配置是"auto"。

現在我們加上這個配置項,並配置為"dependency":

復制代碼
 1 module.exports = {  2  ...  3  plugins: [  4  ...  5 new HtmlPlugin({  6 filename: "../index.html",  7 template: __dirname + "/src/templates/index.html",  8 chunksSortMode: "dependency"  9  }) 10  ] 11 };
復制代碼

然后再重新打包,再看index.html,發現這下app.js在vendor.js后面了,最后運行程序也能正常顯示了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM