vue项目部署优化

如果项目需要进行优化那么开发阶段和上线阶段的环境可能不一样，所以我们需要把入口文件分开。

1.首先我们需要创建两个入口文件prod_env.js 和 dev_env.js

然后在这两文件中拷贝原入口文件main.js里的内容

2.项目根目录下新建 vue.config.js

编写如下代码

module.exports={
    chainWebpack:config=>{
        config.when(process.env.NODE_ENV === 'production',config=>{
            config.entry('app').clear().add('./src/prod_env.js')
        })
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/dev_env.js')
        })
    }
}

这样开发时就使用dev.env.js 作为入口文件，而项目上线时就使用prod_evn.js 作为入口文件

在程序打包的时候会通过import引入很多包，这会导致打包后的文件体积较大，加载速度变慢，所以首先我们使用CDN节点的方式引入包。

在这里把引入的包都删掉

然后替换成CDN节点的方式引入

然后修改vue.config.js文件

然后重新打包文件（可能需要两次才能成功）

但是这样通过CDN节点的方式会引发一些问题

index.html中引入的CDN节点会和项目开发阶段的import引入的插件产生冲突，非常麻烦。
解决方案：在vue.config.js中加入如下代码

然后修改index.js

这样使用npm run serve 打包就不会使用这些CDN节点了

使用了CDN节点的方式之后打包文件可能还是过大，所以这里继续使用vue提供的懒加载的方式进行优化。

路由懒加载的方式会把打包文件分成一个一个的模块，在需要时加载就能更快的把先展示的加载出来，大大提升了运行速度。

1.安装插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

2.修改babel 配置文件

2.修改index.js路由

重新加载会发现每个模块都变小了

对于 node.js 来说，我们可以使用 compression 中间件在服务器进行文件压缩

安装compression

npm install compression

修改app.js引入注册中间件