vue-shop(四)——项目优化及部署上线

1、使用nprogress 实现进度条的效果

npm install --save nprogress

2、使用babel-plugin-transform-remove-console插件去除代码中的console.log语句

npm install babel-plugin-transform-remove-console --save-dev

使用：

3、只在发布模式移除console

// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins
  ]
}

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

通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从 而对项目的打包发布过程做自定义的配置。

5、为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(即 src/main.js)。为了将项目 的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即:
1 开发模式的入口文件为 src/main-dev.js
2 发布模式的入口文件为 src/main-prod.js

6、通过 externals 加载外部 CDN 资源

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功 后，单文件体积过大的问题。
为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。