Vue 项目优化——通过externals加载外部CDN资源，提高网页效率

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件(js/chunk-vendors.******.js)中，从而导致打包后单文件体积过大的问题。

一、如何解决上述问题

可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，最终都不会被打包。通过排除这些包减小js/chunk-vendors.******.js文件体积。
原理：打包期间，webpack会先检查externals中是否声明第三方依赖包，如果有，则webpack不会把对应的依赖包打包到js/chunk-vendors.******.js中，而是在用到包的时候去window全局去寻找这个对象

二、具体步骤:

1. 先在vue.config.js中添加externals设置排除项

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')

            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

2. 添加externals排除的CDN资源

• 在main-prod.js中，删除externals排除的依赖包对应的样式(css)
• 在public/index.html文件的头部，添加对应的js、css

福利：这里提供一个开源CDN加速服务 bootcdn
温馨提示：添加的js、css需要与pack.json文件中对应包的版本相同

3. 对比通过externals打包前后代码的体积。

很明显，通过externals打包后的代码体积更小。

4. ElementUI优化

ElementUI中的组件，也通过CDN的形式来加载，这样能进一步减小打包后的文件体积。

• 在main-prod.js中，注释掉element-ui的js和css
• 在index.html的头部区域，通过CDN加载element-ui的js和css