VUE项目的优化

项目优化

项目优化策略

通过vue.config.js修改webpack的默认配置

通过vue-cli 3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心放到具体功能和业务逻辑的实现上。

如果程序员有修改webpack默认配置的需求，可以在项目更目录中，按需创建vue.config.js这个配置文件，从而对程序的打包发布过程做自定义的配置(具体配置参考https://cli.vuejs.org/zh/config/#vue-config-js)。

// vue.config.js

//这个文件中，应该导出一个包含了自定义配置选项的对象

module.exports = {

// 选项

}

configgureWebpack 和 chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chairnWebpack节点，来自定义webpack的打包配置。

在这里，configuerWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同:

1. chainWebpack通过链式编程的形式，来修改默认的webpack配置
2. configureWebpack通过操作对象的形式，来修改默认的webpack配置

通过chainWebpack自定义打包入口

代码示例如下:

module.exports = {

chainWebpack:config=>{

config.when(process.env.NODE_ENV=== ‘production’,config=>{

config.entry(‘app’).clear().add(’./src/main-prod.js’)

})

config.when(process.env.NODE_ENV === ‘development’,config=>{

​ config.entry(‘app’).clear().add(’./src/main-dev.js’)

})

}

}

通过externals加载外部CDN资源

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

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声在externals中的第三方依赖包，都不会被打包。

具体配置代码如下:
config.set(‘externals’,{

vue:‘Vue’,

‘vue-router’:‘VueRouter’,

axios:‘axios’,

lodash:’_’,

echarts:‘echarts’,

nprogress:‘NProgress’,

‘vue-quill-editor’:‘VueQuillEditor’

})

同时，需要在public/index.html文件头部，添加CDN资源引用

以及，需要在public/index.html文件的头部，添加CDN资源引用

通过CDN优化ElementUI的打包

虽然在开发阶段，我们启用了element-ui组件许按需加载，尽可能的减少打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element-ui中的组件，也通过CDN的形式来加载，这样能够进一步减少打包后的文件体积。

具体操作流程如下:

1. 在main-prod.js中，注释掉element-ui按需加载的代码.
2. 在index.html的头部区域中，通过CDN加载element-ui的js和css样式

首页内容定制

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式定制如下:

module.exports = {
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{         
            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })

        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')

            //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = false
                return args
            })
        })
    }
}

然后在public/index.html中使用插件判断是否为发布环境并定制首页内容

路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应组件分割成不同的代码块，然后当如有被访问的时候才加载对应组件，这样就更加高效了。