摘要:今天就來簡單講講它們的使用。這個插件的作用是創建文件和文件。使用其他的腳手架需要根據具體情況考慮。不要使用,否則在運行時會報錯誤。的和的要保持一致。
這段時間在對公司的打包構建速度和app.js文件大小進行優化。使用到了webpack的DllPlugin和DllReferencePlugin。今天就來簡單講講它們的使用。
其實對于這兩個插件網上已經有很多各種各樣的文章了。不過筆者認為,那些文章都寫得很棒,但是對于部分需要注意的地方都沒有說明。這里筆者就根據自己的理解講講個人的理解。如果有什么不對的地方希望能有人指出,小弟在此先謝過了。
DllPlugin首先我們來講講DLLPlugin這個插件吧。這個插件的作用是創建dll文件和manifest文件。dll文件就是就是我們需要引入的文件,manifest文件是引導webpack引入到當前項目的文件。好吧,直接貼代碼:
webpack.dll.conf.js
var path = require("path") var webpack = require("webpack") var CleanWebpackPlugin = require("clean-webpack-plugin") var config = require("../config") var __root = xxx // 這里是你的根路徑 // 這里是靜態資源路徑,如果使用vue-cli的,就是根目錄下的static目錄; // 如果使用@vue/cli的就是根目錄下的public目錄。使用其他的腳手架需要根據具體情況考慮。 var static = xxx module.exports = { context: __root, // 這里配置的context就是后面dll的context entry: { "core": ["vue", "vue-router", "vuex"], "asset": ["axios", "fastclick"] }, output: { path: path.resolve(static, "lib"), filename: "[name]-[chunkhash:7].dll.js", library: "lib_[name]", // *** 這里不要添加libraryTarget,否則webpack打包時會出錯。 // (提示是__WEBPACK__EXTERNAL__MODULE__xxx未定義) *** // libraryTarget: "umd" }, resolve: { modules: [path.resolve(__root, "node_modules")], extensions: [".js", ".json"], alias: { "vue$": "vue/dist/vue.esm.js" } }, // 這里沒有寫loaders,如果有需要可以自行添加loaders plugins: [ // *** 這里很關鍵 *** new webpack.DllPlugin({ // 因為上面寫了context,所以這里可以不指定context // 這里manifest的名字必須要有變量,因為類似上面的core和asset會分別創建一個manifest, // 如果名稱相同,manifest會生成不規范的json,在引用時會報錯。 path: path.resolve(__root, "static/manifest/[name].manifest.json"), name: "lib_[name]" // *** 這里的名字必須與output.library一致 *** }), // 這個是用來穩定hash值,防止出現webpack的hash出現莫名的變化 new webpack.HashedModuleIdsPlugin(), new webpack.NamedChunksPlugin() ... 其他插件 ] }
上面就是webpack.dll.conf.js的主要配置。執行之后會在static文件夾(在vue-cli生成的項目中用于存放不需要webpack構建的靜態文件【@vue/cli中的目錄名為Public】)下生成兩個文件夾(lib文件夾和mainfest文件夾)。其中lib下的文件為我們已經打包好的組件庫,mainfest下的文件在引入項目時有用(是一個JSON文件)。
DllReferencePluginwebpack.conf.js
var path = require("path") // 獲取dll文件的manifest function getDllManifest () { var plugins = [] Object.keys({ "core": ["vue", "vue-router", "vuex"], "asset": ["axios", "fastclick"] }).forEach((name) => { plugins.push( new webpack.DllReferencePlugin({ context: __root, // 這里的context必須與DllPlugin中的context保持一致 manifest: path.resolve(__root, "static/manifest/[name].manifest.json").replace(/[name]/gi, name) }) ) }) return plugins } module.exports = { entry: { app: "./src/main.js" }, output: { path: path.resolve(__dirname, "..") filename: "js/[name]js" }, ... 其他代碼 plugins: [ // *** 所以這里可能會引入多個DllReferencePlugin,具體要看有幾個manifest文件了。*** ...getDllManifest(), new HtmlWebpackPlugin({ filename: utils.assetsPath("page/retail.html"), template: path.join(config.dev.page, "retail.html"), inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: "dependency" }), // dll文件需要插件將其引入到html文件中,以方便后續使用 new HTMLWebpackIncludeAssetsPlugin({ append: false, publicPath: config.build.assetsPublicPath, assets: [{ path: config.build.assetsSubDirectory, glob: "**/*.js", globPath: config.dll.static }], }), // 將dll文件拷貝到你的dist目錄下 new CopyWebpackPlugin([ { // 這里是dll文件當前所在的文件目錄 from: static, // 這里是生產環境的資源地址 to: config.build.assetsSubDirectory, // 過濾static中的部分文件 ignore: [".*", "manifest/*"] } ]) ] }
getDllManifest方法是將打包好的庫引入到項目中(就是在html中生成script標簽的方式引入,它會在app.js之前生成,保證代碼執行順序的正確性),并保證構建工具不會再次對它進行打包。以上就是生成和引用dll文件的配置。
注:
output.library必須與DllPlugin配置中的name字段保持統一。
不要使用libraryTarget,否則在運行時會報__WEBPACK__EXTERNAL__MODULE__xxx is not defined錯誤。
DllPlugin的context和DllReferencePlugin的context要保持一致。
manifest的名字最好是可配置的,這樣方便生成多個dll文件。
如果有多個dll文件,需要添加多個DllReferencePlugin插件去分別處理。
推薦講webpack構建優化的
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95946.html
摘要:沒使用你會發現這個時候,和都非常的大,因為他們都了一個很大的包,而使用了,則將這個大包抽離出來成為一個。如果是在手機開發中,便可以將頻繁修改的文件和不頻繁修改的文件分離,這樣每次更新只需要替換部分的包。 Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用 是一種分包的解決方案,它可以將部分代碼抽出來,單獨形成一個插件包,類似windows系統中...
摘要:沒使用你會發現這個時候,和都非常的大,因為他們都了一個很大的包,而使用了,則將這個大包抽離出來成為一個。如果是在手機開發中,便可以將頻繁修改的文件和不頻繁修改的文件分離,這樣每次更新只需要替換部分的包。 Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用 是一種分包的解決方案,它可以將部分代碼抽出來,單獨形成一個插件包,類似windows系統中...
摘要:前言時光飛逝,轉眼又偷懶了一個多月什么是文件為動態鏈接庫文件在中,許多應用程序并不是一個完整的可執行文件,它們被分割成一些相對獨立的動態鏈接庫,即文件,放置于系統中。 前言 (時光飛逝,轉眼又偷懶了一個多月) 什么是DLL DLL(Dynamic Link Library)文件為動態鏈接庫文件,在Windows中,許多應用程序并不是一個完整的可執行文件,它們被分割成一些相對獨立的動態鏈...
摘要:使用允許使用多線程進行構建來提升構建的速度。在中,有大量的文件,稱為動態鏈接庫。文檔里面還有一句話是這樣說的動態鏈接庫提供了將應用模塊化的方式,應用的功能可以在此基礎上更容易被復用。 本文原文發表在:https://medium.com/@Erichain/...本文采用的 Webpack 版本為 2.0+本文源代碼地址:https://github.com/Erichain/w......
摘要:本文首發于的技術博客實用至上,非經作者同意,請勿轉載。原文地址如果您對本系列文章感興趣,歡迎關注訂閱這里前言書承上文多頁應用架構系列十如何打造一個自定義的。終于,發現了這一大殺器,打包時間過長的問題得到完美解決。 本文首發于Array_Huang的技術博客——實用至上,非經作者同意,請勿轉載。原文地址:https://segmentfault.com/a/119000000710437...
閱讀 1166·2021-11-11 16:55
閱讀 3052·2021-08-16 11:00
閱讀 2895·2019-08-30 15:56
閱讀 3435·2019-08-30 11:24
閱讀 3416·2019-08-30 11:05
閱讀 3531·2019-08-29 15:15
閱讀 2615·2019-08-26 13:57
閱讀 2554·2019-08-23 18:17