公共代码抽离（代码分割）

• 单页面跟多页面都可使用，公共代码只需要下载一次就缓存起来了，避免了重复下载。可以参上xxxx,配置在 optimization.splitChunks 中,

//webpack.config.js
module.exports = {
    optimization: {
        splitChunks: {//分割代码块
            cacheGroups: {
                vendor: {
                    //第三方依赖
                    priority: 1, //设置优先级，首先抽离第三方模块
                    name: 'vendor',
                    test: /node_modules/,
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 1 //最少引入了1次
                },
                //缓存组
                common: {
                    //公共模块
                    chunks: 'initial',
                    name: 'common',
                    minSize: 100, //大小超过100个字节
                    minChunks: 3 //最少引入了3次
                }
            }
        }
    }
}

element-ui 按需加载

• element-ui/lib 占1.75M，把element-ui 按需加载，体积减少到849.77k 但是需要在 babel.config.js文件中添加（vue cli3 中需要安装 babel-plugin-component）

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

之前 1.75M

优化 849.77k

1.路由懒加载

• 当打包应用的时候，JavaScript包会变的特别大，影响页面加载，如果这时我们在访问路由的时候去加载该模块，那会变的十分高效，把静态引入方式改为动态引入方式

// 需要异步获取的路由
export const asyncRoutesMap = {
    [routetypes.LAYOUT]: () =>
        import( /* webpackChunkName: "layout" */ '@/layout/index'),
    [routetypes.HOME]: () =>
        import( /* webpackChunkName: "home" */ '@/views/home/index'),      
    // 策略管理
    [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'),
};

• 在vue cli3中，我们还需要手动移除 prefetch ，Preload ，因为在vue cli 官方文档上提到，可以去了解下,就是当首屏加载的时候，会一次性下载完所以的路由文件，这会导致首屏的时候请求内容变多，首屏加载变慢，删除无用的插件，避免加载多余的资源（如果不删除的话，则会在 index.html 里面加载 无用的 js 文件）
• 注: 本项目是vue2 没做处理

    // 移除 prefetch 插件      
    config.plugins.delete('prefetch')      
    // 移除 preload 插件      
    config.plugins.delete('preload');

2.公共代码抽离（代码分割）

• 依赖包单独抽离打包
• 单页面跟多页面都可使用，公共代码只需要下载一次就缓存起来了，避免了重复下载。
• 配置在optimization.splitChunks 中

// maxInitialSize: 5000000,  // 生成块的最小大小(以字节为单位)。5000K ~ 5M 初始化加载文件分块 <= 5M加载 chunks。
//webpack.config.js
module.exports = {
    optimization: {
        splitChunks: {//分割代码块
            cacheGroups: {
                // 单独抽离antv为一个打包文件
                antv: {
                    name: 'chunk-antv',
                    priority: 20,
                    test: /[\\/]node_modules[\\/]_?@antv(.*)/,
                },
                //第三方依赖
                vendor: {
                    priority: 1, //设置优先级，首先抽离第三方模块
                    name: 'vendor',
                    test: /node_modules/,
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 1 //最少引入了1次
                },
                //缓存组
                common: {
                    //公共模块
                    chunks: 'initial',
                    name: 'common',
                    minSize: 100, //大小超过100个字节
                    minChunks: 3 //最少引入了3次
                },
            }
        }
    }
}

3.element-ui 按需加载

• 本项目 element-ui/lib 占1.75M，把element-ui 按需加载，体积减少到849.77k

• 需要在 babel.config.js文件中添加

 yarn add babel-plugin-component (vue cli3 中需要安装 )

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

4.lodash按需引入

npm install babel-plugin-lodash --save

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    "lodash", // 按需加载lodash
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}