成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置：首頁(yè)技術(shù)文章
文章詳情頁(yè)

javascript - vue webpack 打包后異常膨脹

瀏覽：102日期：2023-05-27 16:32:55

問(wèn)題描述

用vue做了個(gè)demo 整站就一個(gè)頁(yè)面 代碼不過(guò)300行 這是main.js中的引入

javascript - vue webpack 打包后異常膨脹

下面是打包后的大小

javascript - vue webpack 打包后異常膨脹

怎么會(huì)這么大？？？ 區(qū)區(qū)一個(gè)頁(yè)面 求解！

引入的這幾個(gè)包原來(lái)這么大，element還是只引入了部分組件。有沒(méi)有什么優(yōu)化方法呢？

問(wèn)題解答

回答1：

vue vue-router vuex element這個(gè)大小還是挺正常的

回答2：

你要把從node_modules里面引入的模塊也算進(jìn)去才行啊，不然這些東西憑空冒出來(lái)么。。element-ui、 vue、axios你沒(méi)算進(jìn)去吧

回答3：

你打包的時(shí)候， 會(huì)把你所依賴(lài)的包都?jí)嚎s了， 如果你不想vendor這么大，可以分步引入CDN

方案一：externals選項(xiàng) 就是我說(shuō) 的 引入CDN，這樣分布引入，會(huì)好很多。

// webpack.prod.config.js// 多余代碼省略module.exports = { externals: {’vue’: ’window.Vue’,’vuex’: ’window.Vuex’,’vue-router’: ’window.VueRouter’... }}// 配置externals之后，webpack不會(huì)把配置項(xiàng)中的代碼打包進(jìn)去，別忘了需要在外部引入cdn上的js文件// html<body> <script src='http://www.piao2010.com/wenda/XXX/cdn/vue.min.js'></script> ......</body>方案二：webpack.DLLplugin

webpack.dll.config.js：

// webpack.dll.config.js// 需要打包到一起的js文件const vendors = [ ’vue’, ’vuex’, ’vue-router’, ’axios’, ’moment’, ’vue-echarts’];module.exports = { // 也可以設(shè)置多個(gè)入口，多個(gè)vendor，就可以生成多個(gè)bundle entry: {vendor: vendors }, // 輸出文件的名稱(chēng)和路徑 output: {filename: ’[name].bundle.js’,path: path.join(__dirname, ’..’, ’static’),library: ’[name]_[chunkhash]’, }, plugins: [// 這時(shí)候打包需要設(shè)置環(huán)境為production，因?yàn)橄駐ue之類(lèi)在// dev環(huán)境下會(huì)比prod環(huán)境多一些信息，在生產(chǎn)環(huán)境如果打包的是dev代碼，// vue也會(huì)給出警告new webpack.DefinePlugin({ ’process.env’: {NODE_ENV: ’'production'’ }}),new webpack.DllPlugin({ path: path.join(__dirname, ’..’, ’static’, ’[name]-manifest.json’), name: ’[name]_[chunkhash]’, context: __dirname}),// 壓縮new webpack.optimize.UglifyJsPlugin({ compress: {warnings: false }, sourceMap: true}),new webpack.LoaderOptionsPlugin({ minimize: true}),new webpack.optimize.OccurrenceOrderPlugin() ]}

第二種我沒(méi)有研究 - -

標(biāo)簽： JavaScript
相關(guān)文章：