前段時間做項目，技術棧是vue+webpack,主要就是官網首頁加后臺管理系統 根據當時情況，分析出三種方案
思考：
上一張多頁面的結構圖
下載vue spa模板
npm install vue-cli -gvue init webpack multiple-vue-amazing
改造多頁面應用
npm install glob --save-dev
修改src文件夾下面的目錄結構
在util.js里面加入
/* 這里是添加的部分 ---------------------------- 開始 */// glob是webpack安裝時依賴的一個第三方模塊，還模塊允許你使用 *等符號, 例如lib/*.js就是獲取lib文件夾下的所有js后綴名的文件var glob = require('glob')// 頁面模板var HtmlWebpackPlugin = require('html-webpack-plugin')// 取得相應的頁面路徑，因為之前的配置，所以是src文件夾下的pages文件夾var PAGE_PATH = path.resolve(__dirname, '../src/pages')// 用于做相應的merge處理var merge = require('webpack-merge')//多入口配置// 通過glob模塊讀取pages文件夾下的所有對應文件夾下的js后綴文件，如果該文件存在// 那么就作為入口處理exports.entries = function () { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('//') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map}//多頁面輸出配置// 與上面的多頁面入口配置相同，讀取pages文件夾下的對應的html后綴文件，然后放入數組中exports.htmlPlugin = function () { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('//') + 1, filePath.lastIndexOf('.')) let conf = { // 模板來源 template: filePath, // 文件名稱 filename: filename + '.html', // 頁面模板需要加對應的js腳本，如果不加這行則每個頁面都會引入所有的js腳本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr}/* 這里是添加的部分 ---------------------------- 結束 */webpack.base.conf.js 文件/* 修改部分 ---------------- 開始 */ entry: utils.entries(), /* 修改部分 ---------------- 結束 */webpack.dev.conf.js 文件/* 注釋這個區域的文件 ------------- 開始 */ // new HtmlWebpackPlugin({ // filename: 'index.html', // template: 'index.html', // inject: true // }), /* 注釋這個區域的文件 ------------- 結束 */ new FriendlyErrorsPlugin() /* 添加 .concat(utils.htmlPlugin()) ------------------ */ ].concat(utils.htmlPlugin())webpack.prod.conf.js 文件/* 注釋這個區域的內容 ---------------------- 開始 */ // new HtmlWebpackPlugin({ // filename: config.build.index, // template: 'index.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' // }), /* 注釋這個區域的內容 ---------------------- 結束 */ // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ]) /* 該位置添加 .concat(utils.htmlPlugin()) ------------------- */ ].concat(utils.htmlPlugin())引入第三方ui庫
npm install element-ui bootstrap-vue --save
分別在不同的頁面引入不同的ui index.js
import BootstrapVue from 'bootstrap-vue'Vue.use(BootstrapVue)
admin.js
import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)
上面多頁面的配置是參考網上的，而且網上的思路大都很相似，核心就是改多個entry，配置完成了之后，開發的時候也是發現不了問題的，然后大概就開發了一個月，開發完之后對官網進行性能分析時發現，webpack打包的vendor.js網絡加載時間特別長，導致首屏的白屏時間非常長，最終通過-webpack-bundle-analyzer分析得到了結論
npm run build --report
你會發現vendor.js包含了index.html和admin.html的共同部分，所以這個vendor包注定會很大很冗余
解決思路
既然是vendor過大引起加載速度慢，那就分離這個vendor就好了。我是這樣想的，把各個頁面中都使用到的第三方代碼提取至vendor.js中，然后各個頁面中用到的第三方代碼再打包成各自的vendor-x.js，例如現有頁面index.html、admin.html，則最終會打包出vendor.js、vendor-index.js、vendor-admin.js。
webpack.prod.conf.js 文件
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor-admin', chunks: ['vendor'], minChunks: function (module, count) { return ( module.resource && //.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 && module.resource.indexOf('element-ui') != -1 ) } }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor-index', chunks: ['vendor'], minChunks: function (module, count) { return ( module.resource && //.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 && module.resource.indexOf('bootstrap-vue') != -1 ) } }),再次分析，一切都很ok，vendor.js被分離成了vendor.js、vendor-index、vendor-admin.js
本來以為解決了CommonsChunkPlugin的分離vendor.js的問題，就可以了，然后打包出來發現index.html和admin.html都少了一個引入(各自對應的那個vendor-xx.js)
解決方案
這個問題其實就是HtmlWebpackPlugin的問題 把原來的 chunksSortMode: 'dependency'改成自定義函數的配置，如下
util.js文件
chunksSortMode: function (chunk1, chunk2) { var order1 = chunks.indexOf(chunk1.names[0]) var order2 = chunks.indexOf(chunk2.names[0]) return order1 - order2 },最終實現
感想
大功告成了，雖然配置看起來很簡單，不過我當時開發的時候，思考了很久，所以假如你CommonsChunkPlugin和HtmlWebpackPlugin不熟悉或者只會用別人第三方的配置表，估計會踩大坑，比如說,CommonsChunkPlugin不指定chunks，默認是什么？minChunks大多數人只會寫一個數值，然而自定義一個函數的寫法其實才是最強大的，根據我個人的經驗chunks結合minChunks自定義函數的寫法，能解決幾乎所有CommonsChunkPlugin靈異的事件。
總結
以上所述是小編給大家介紹的vue多頁面開發和打包正確處理方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
