vue如何將單頁面改形成多頁面應用

問題描述： 手頭有一個項目是使用 vue-cli 搭建的單頁面應用。項目分爲了管理平臺和用戶查看頁面，用戶查看頁面是很簡單的頁面，可是在加載過程當中，卻加載了整個應用的打包代碼，量重且影響了響應和體驗。我想要的效果是，查看頁面只加載查看頁面的代碼，不包含管理系統的代碼，所以着手將單頁面應用改形成多頁面應用，這裏分享下方法。

一、改造文件目錄

改造前：

改造後：

• assets：這裏不變，依然放置公用的靜態資源文件；
• components：這裏存放應用下全部的vue組件；
• pages：這裏存放咱們的多頁面，好比我把管理系統頁面放在index中，查看頁面放在view中；

pages文件：

每一個頁面下必須包含的文件是 html/js/vue，是文件入口，若是該頁面下包含路由，狀態管理，接口請求也放在該目錄下；

二、打包配置文件修改

咱們最後的打包文件是這樣的，能夠看到有2個html，包括資源也分開了。這是經過修改webpack配置改造的。採用的方法也是網上比較推薦的方法.
HTML分離：

資源分離：

2.1 修改build->utils.js

修改build文件夾下的utils.js，直接將下面的代碼複製在後面便可。

var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var PAGE_PATH = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 這段代碼的意思是根據咱們`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，加載對應的資源文件
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
}

2.2 修改入口entry

• 打開 build->webpack.base.conf.js,替換entry爲在utils新增的entries：
  

2.3 修改html插件

• 打開build->webpack.prod.conf.js,先去除原來的配置：
  
  而後再把咱們剛在utils裏新增的配置加上：
  

三、頁面怎麼寫

上面的方法，網上五花八門的都介紹了，可是在實現的過程當中，仍是遇到了問題：這裏粘貼下我實踐成功的頁面寫法，減小一些爬坑吧~
view.html：

view.vue：

view.js：

ok，這時候 npm run build 就能夠打包出咱們要的文件了，訪問方法是直接輸入對應的html，若是是管理首頁，無需寫index.html，好比本地訪問查看頁面：

四、進一步優化

這個時候咱們又發現一個問題，就是個人查看頁面很簡單，沒有引入狀態管理，路由，UI框架，可是咱們知道vue的webpack把這些第三方公共組件都打包到render.js裏面了且文件很大會影響咱們的加載速度。這裏我是將比較大的第三方庫使用了cdn方法加載，實踐證實會減小了一半的加載速度，且壓縮後的js代碼也小了不少了~