vue how the page will be transformed into a single multi-page applications

Problem Description: do have a project is to use a vue-clisingle-page application built. Project management into the platform and user viewing the page, users view the page is very simple page, but during the loading process, but loaded with packaged code for the entire application, and weighing the impact of the response and experience. The effect I want is to see only the code page to load a page view, does not contain code management system, so a single page application to proceed to transform into a multi-page application, here to share the next method.

1, the transformation file directory

Before the transformation:

the transformation:

• assets: Here unchanged, still placing public static resource files;
• components: Here vue store all the application components;
• pages: Where to store our multi-page, for example, I put the management system pages index, view pages in the viewmiddle;

pages file:

Each page file must contain a html/ js/ vue, a file entry, if the page contains the route, state management, interface request is also placed in this directory;

2, modify the package configuration file

Our final package file is, you can see there are two html, including the resources are separated. This is done by modifying webpackthe configuration of the transformation. The method is also used in online comparison method recommended
HTML separation:

Resource isolation:

2.1 modify the build-> utils.js

Modify buildthe folder utils.js, directly following the code can be copied later.

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 Modify entrance entry

• Open build->webpack.base.conf.js, replaced entryas utilsnew entries:
  

2.3 modify the html plug-in

• Open build->webpack.prod.conf.js, first remove the original configuration:
  
  then put us in just utilsin the new configuration with:
  

3, how to write page

The above methods are introduced a wide variety of online, but in the process of implementation, or encountered a problem: where to paste my successful practice of the written page, reduce some climbing pit it ~
view.html:

view.vue：

view.js：

ok, this time npm run buildit can package the file we want, and access by entering it directly corresponds html, if management is home, without having to write index.html, such as local access review page:

4, further optimization

This time we found a problem, that is my view the page is very simple, without the introduction of state management, routing, UI framework, but we know that these third-party vue of webpack common components are packaged to render.js inside the General Assembly and the file is affect our loading speed. Here I am a relatively large third-party libraries will use the cdnmethod to load, proved to be halved loading speed, and compressed js code is also a lot smaller -