This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Multipage application packaging solution

 

First, what are single-page and multi-page apps?

  • A single page application (SPA), more generally, is an application that has only one home page, with the browser initially loading all the necessary HTML, JS, and CSS. All page content is contained in this so-called home page.

  • Multi-page (MPA) : The whole page is refreshed when an application has multiple pages.

 

Advantages and disadvantages of single page:

Advantages:

  1. Good user experience, fast, content changes do not need to reload the entire page, less pressure on the server.

  2. The front and back ends are separated, such as the VUE project

  3. Complete front-end componentization, front-end development is no longer page as a unit, more using the idea of componentization, code structure and organization more standardized, easy to modify and adjust;

Disadvantages:

  1. The first time you load a page, you load a lot of static resources, and the load time is relatively long.

  2. Not good for SEO optimization, single page page, data in the front-end rendering, means no SEO. Multi-page applications are good for SEO

  3. Page navigation is not available, and if you have to navigate, you need to do it yourself. (Because it is a single page, you cannot use the browser’s forward and backward function, so you need to set up your own stack management.)

 

Multi-page application advantages:

  1. Decouple between pages
  2. Is conducive to SEO

   

Basic idea of multipage application packaging

Each page has one entry and one HTml-webpack-plugin disadvantages: WebPack configuration needs to be changed every time a page is added or deleted. For example:

entry: {
  index:'./src/index.js'.add:'./src/add.js'
},
Copy the code

To optimize the

They can live inProcedural thinking/ SRC /index/index.js/SRC /index/index.js/SRC /search/index.js /search/index.jsProject directory:

You can use glob to match files

Configuration is as follows

const setMPA = () = > {
  const entry = {};
  const htmlWebpackPlugins = [];

  const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));

  Object.keys(entryFiles).map((index) = > {
    // Get the path name
    const entryFile = entryFiles[index];
    // Match the file name between/SRC and /
    // ！！！！ The () parentheses indicate groups
    const match = entryFile.match(/src\/(.*)\/index\.js/);
    const pageName = match && match[1];
    entry[pageName] = entryFile;

    htmlWebpackPlugins.push(
      // new HtmlWebpackPlugin will generate an HTML
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`.chunks: [pageName],
        inject: true.minify: {
          // Remove Spaces
          collapseWhitespace: true.// Remove comments
          removeComments: true,}}));console.log(htmlWebpackPlugins);
  });
  return {
    entry,
    htmlWebpackPlugins,
  };
};
const { entry, htmlWebpackPlugins } = setMPA();
Copy the code

The packing result is as follows

Webpack packages can be messy. If you enter a file with the name search, a file named search.xxxxx.js will be generated directly in the dist directory. But with names like SRC /search/index, the corresponding directory structure is generated.

As follows: