Common code pull out (code split)

• Single page and multiple pages can be used, and common code only needs to be downloaded once and cached, avoiding repeated downloads. In optimization.splitchunks,

//webpack.config.js
module.exports = {
    optimization: {
        splitChunks: {// Split code blocks
            cacheGroups: {
                vendor: {
                    // Third-party dependencies
                    priority: 1.// Set the priority, first remove the third-party module
                    name: 'vendor'.test: /node_modules/,
                    chunks: 'initial'.minSize: 0.minChunks: 1 // At least once
                },
                / / cache group
                common: {
                    // Public module
                    chunks: 'initial'.name: 'common'.minSize: 100.// The size exceeds 100 bytes
                    minChunks: 3 // At least 3 times
                }
            }
        }
    }
}
Copy the code

Element-ui loads on demand

• Elder-ui /lib occupies 1.75m, load elder-UI on demand, reduce the volume to 849.77K

But it needs to be added in the babel.config.js file (vue cli3 requires babel-plugin-component)

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'].plugins:[      
        [        
            'component',        
            {
                libraryName: 'element-ui'.styleLibraryName: 'theme-chalk'}}]].Copy the code

Before 1.75 M

Optimization of 849.77 k

1. Lazy route loading

• When packaging applications, JavaScript packages can become very large, affecting page loading. If we load this module when accessing routes, it will become very efficient, changing the static import mode to the dynamic import mode

// The route to be obtained asynchronously
export const asyncRoutesMap = {
    [routetypes.LAYOUT]: () = >
        import( /* webpackChunkName: "layout" */ '@/layout/index'),
    [routetypes.HOME]: () = >
        import( /* webpackChunkName: "home" */ '@/views/home/index'),      
    // Policy management
    [routetypes.STRATEGY_SYSTEM]: () = >
        import( /* webpackChunkName: "stragegy" */ '@/views/strategy/strategy-system/index'),
    [routetypes.STRATEGY_GLOBAL_MAC]: () = >
        import( /* webpackChunkName: "stragegy" */ '@/views/strategy/strategy-global/GlobalMac'),
    [routetypes.STRATEGY_GLOBAL_MAC_EDIT]: () = >
        import( /* webpackChunkName: "stragegy" */ '@/views/strategy/strategy-global/components/MacEdit'),
    [routetypes.STRATEGY_GLOBAL_MAC_RECORD]: () = >
        import( /* webpackChunkName: "stragegy" */ '@/views/strategy/strategy-global/components/DownRecord'),};Copy the code

• In Vue CLI3, we also need to manually remove prefetch and Preload, because it is mentioned in the official Vue CLI document that all routing files will be downloaded at one time when the first screen is loaded, which will lead to more requests and slow loading on the first screen. Remove useless plug-ins to avoid loading extra resources (otherwise useless JS files will be loaded in index.html)
• Note: this item is vuE2 not processed

    // Remove the prefetch plugin
    config.plugins.delete('prefetch')      
    // Remove the preload plugin
    config.plugins.delete('preload');

Copy the code

2. Common code separation (code splitting)

• Dependent packages are removed and packaged separately
• Single page and multiple pages can be used, and common code only needs to be downloaded once and cached, avoiding repeated downloads.
• Configuration is in optimization.splitChunks

// maxInitialSize: 5000000, // The minimum size (in bytes) of the generated block. 5000K to 5M initialize chunks of the loading file. <= 5M load chunks.
//webpack.config.js
module.exports = {
    optimization: {
        splitChunks: {// Split code blocks
            cacheGroups: {
                // Separate antV into a package file
                antv: {
                    name: 'chunk-antv'.priority: 20.test: /[\\/]node_modules[\\/]_? @antv(.*)/,},// Third-party dependencies
                vendor: {
                    priority: 1.// Set the priority, first remove the third-party module
                    name: 'vendor'.test: /node_modules/,
                    chunks: 'initial'.minSize: 0.minChunks: 1 // At least once
                },
                / / cache group
                common: {
                    // Public module
                    chunks: 'initial'.name: 'common'.minSize: 100.// The size exceeds 100 bytes
                    minChunks: 3 // At least 3 times},}}}}Copy the code

3. Element-ui loads on demand

• In this project, element-UI /lib occupies 1.75m, and the volume is reduced to 849.77K by loading element-UI on demand

• Need to be added in the babel.config.js file

Yarn add babel-plugin-component (required for Vue CLI3)Copy the code

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'].plugins:[      
        [        
            'component',        
            {
                libraryName: 'element-ui'.styleLibraryName: 'theme-chalk'}}]].Copy the code

4. Lodash is introduced on demand

npm install babel-plugin-lodash --save
Copy the code

module.exports = {
  "presets": [
    "@vue/app"]."plugins": [
    "lodash".// Load Lodash on demand
    [
      "component",
      {
        "libraryName": "element-ui"."styleLibraryName": "theme-chalk"}}]]Copy the code