摘要:第一步新建一個名字自己定義值得關注的是數組資源依賴包,提前編譯這里根據自己項目的具體引用情況自行添加資源依賴包,提前編譯定義文件生成的位置的部分由的名字替換輸出到那個全局變量上和一樣即可。
原因
在使用vue開發單頁面應用時,隨著項目頁面的增多,你會發現生產環境的build速度會很慢,同時頁面初始的js大小越來越大。當你無法忍受的時候就該優化了。
思路這方面的優化無非就是異步加載、提取一部分長期不需要更新代碼的基礎js庫。
方案 一、異步加載(懶加載)可以采用vue-router的路由懶加載點擊鏈接進行學習
二、對于提取基礎庫可以學習下DllPlugin和DllReferencePlugin兩個插件,同時配合(add-asset-html-webpack-plugin)一起完成提取到自動引入。
值得關注的是lib數組(資源依賴包,提前編譯)這里根據自己項目的具體引用情況自行添加
const webpack = require("webpack"); const path = require("path"); const isDebug = process.env.NODE_ENV === "development"; const outputPath = isDebug ? path.join(__dirname, "../src/common/debug") : path.join(__dirname, "../src/common/dist"); const fileName = "[name]_[hash].js"; // 資源依賴包,提前編譯 const lib = [ "vue", "vuex", "vue-router", "axios", "body-parser", "cookie-parser", "weixin-js-sdk", "element-ui", "vue-scroll" ]; const plugin = [ new webpack.DllPlugin({ /** * path * 定義 manifest 文件生成的位置 * [name]的部分由entry的名字替換 */ path: path.join(outputPath, "manifest.json"), /** * name * dll bundle 輸出到那個全局變量上 * 和 output.library 一樣即可。 */ name: "[name]_[hash]", context: __dirname }), new webpack.optimize.OccurrenceOrderPlugin() ]; if (!isDebug) { plugin.push( // new webpack.DefinePlugin({ // "process.env.NODE_ENV": JSON.stringify("production") // }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true }) ) } module.exports = { devtool: "#source-map", entry: { lib: lib }, output: { path: outputPath, filename: fileName, /** * output.library * 將會定義為 window.${output.library} * 在這次的例子中,將會定義為`window.vendor_library` */ library: "[name]_[hash]", libraryTarget: "umd", umdNamedDefine: true }, plugins: plugin }
簡單的方式是在package.json文件中添加(需要注意的使用的是webpack2) "dll-production": "NODE_ENV=production webpack --config build/webpack.dll.config.js --progress", "dll-test": "NODE_ENV=development webpack --config build/webpack.dll.config.js --progress", 然后通過npm run dll-production 和 npm run dll-test進行構建 正如NODE_ENV的值一樣不同環境引用不同路徑下的lib.js 構建后目錄如下圖
#安裝add-asset-html-webpack-plugin $ npm install --save-dev add-asset-html-webpack-plugin
修改開發環境webpack.dev.config.js
#初始化 const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin") 在plugins中添加 new webpack.DllReferencePlugin({ context: __dirname, manifest: require(path.join(__dirname, "../src/common/debug/manifest.json")) }), new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "../src/common/debug/lib_*.js") }),
執行npm run dev
修改生產環境webpack.prod.config.js
#初始化 const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin") 在plugins中添加 new webpack.DllReferencePlugin({ context: __dirname, manifest: require(path.join(__dirname, "../src/common/dist/manifest.json")) }), new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "../src/common/dist/lib_*.js") }),
執行npm run build(同時與以前的構建速度對比,你會發現節省了很多時間,目前我的項目省了1/3時長)
dll-plugin與CommonsChunkPlugin(webpack4中替換為SplitChunksPlugin)區別共同點:都是提取公共模塊到父模塊中,利用緩存來提高訪問速度(第一次加載除外)
區別:dll-plugin需要手動去配置和打包公共模塊,CommonsChunkPlugin則是每次構建時按照配置打包公共模塊。
使用 DllPlugin 將更改不頻繁的代碼進行多帶帶編譯。這將改善引用程序的編譯速度,即使它增加了構建過程的復雜性。
webpack文檔也推薦使用dll-plugin進行公共模塊的分離。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91742.html
摘要:發布是由團隊開源的,操作接口庫,已成為事實上的瀏覽器操作標準。本周正式發布,為我們帶來了,,支持自定義頭部與腳部,支持增強,兼容原生協議等特性變化。新特性介紹日前發布了大版本更新,引入了一系列的新特性與提升,本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...
閱讀 1998·2021-09-30 09:53
閱讀 1841·2021-09-24 09:48
閱讀 1755·2019-08-30 14:01
閱讀 2170·2019-08-29 18:35
閱讀 1249·2019-08-26 18:27
閱讀 2979·2019-08-26 12:12
閱讀 942·2019-08-23 17:16
閱讀 931·2019-08-23 15:31