問題描述： 手頭有一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁面應(yīng)用渣淳。項(xiàng)目分為了管理平臺(tái)和用戶查看頁面各墨，用戶查看頁面是很簡(jiǎn)單的頁面茄猫，但是在加載過程中誊抛，卻加載了整個(gè)應(yīng)用的打包代碼列牺，量重且影響了響應(yīng)和體驗(yàn)。我想要的效果是拗窃，查看頁面只加載查看頁面的代碼瞎领，不包含管理系統(tǒng)的代碼，因此著手將單頁面應(yīng)用改造成多頁面應(yīng)用随夸，這里分享下方法九默。
1、改造文件目錄
改造前：
改造后：
-
assets：這里不變宾毒，依然放置公用的靜態(tài)資源文件驼修； -
components：這里存放應(yīng)用下所有的vue組件； -
pages：這里存放我們的多頁面诈铛，比如我把管理系統(tǒng)頁面放在index中乙各，查看頁面放在view中；
pages文件：
每個(gè)頁面下必須包含的文件是 html/js/vue幢竹，是文件入口耳峦，如果該頁面下包含路由，狀態(tài)管理焕毫，接口請(qǐng)求也放在該目錄下蹲坷；
2驶乾、打包配置文件修改
我們最后的打包文件是這樣的，可以看到有2個(gè)html冠句，包括資源也分開了轻掩。這是通過修改webpack配置改造的。采用的方法也是網(wǎng)上比較推薦的方法.
HTML分離：
資源分離：
2.1 修改build->utils.js
修改build文件夾下的utils.js懦底，直接將下面的代碼復(fù)制在后面即可。
var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var PAGE_PATH = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 這段代碼的意思是根據(jù)我們`pages`下的文件夾定義webpack的入口：
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
}
// 這段代碼是將生成的html罕扎，加載對(duì)應(yīng)的資源文件
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',
// 頁面模板需要加對(duì)應(yīng)的js腳本聚唐，如果不加這行則每個(gè)頁面都會(huì)引入所有的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
}
2.2 修改入口entry
- 打開
build->webpack.base.conf.js,替換entry為在utils新增的entries：
image
2.3 修改html插件
-
打開
build->webpack.prod.conf.js,先去除原來的配置：
image然后再把我們剛在
utils里新增的配置加上：
image
3、頁面怎么寫
上面的方法腔召，網(wǎng)上五花八門的都介紹了杆查，但是在實(shí)現(xiàn)的過程中，還是遇到了問題：這里粘貼下我實(shí)踐成功的頁面寫法臀蛛，減少一些爬坑吧~
view.html：
view.vue：
view.js：
ok亲桦，這時(shí)候 npm run build 就可以打包出我們要的文件了，訪問方法是直接輸入對(duì)應(yīng)的html浊仆，如果是管理首頁客峭，無需寫index.html，比如本地訪問查看頁面：
4抡柿、進(jìn)一步優(yōu)化
這個(gè)時(shí)候我們又發(fā)現(xiàn)一個(gè)問題舔琅，就是我的查看頁面很簡(jiǎn)單，沒有引入狀態(tài)管理洲劣，路由备蚓，UI框架，但是我們知道vue的webpack把這些第三方公共組件都打包到render.js里面了且文件很大會(huì)影響我們的加載速度囱稽。這里我是將比較大的第三方庫使用了cdn方法加載郊尝，實(shí)踐證明會(huì)減少了一半的加載速度，且壓縮后的js代碼也小了很多了~
