项目优化的几个方面

项目优化策略

1. 移除所有的console

1.1 下载babel-plugin-transform-remove-console模块

1.2 在babel配置文件中plugins数组中添加插件

    plugins:['babel-plugin-transform-remove-console'],

1.3 也可以只在生产模式中移出console

    // 使用一个数组来接收生产模式中所需的插件
    const prodPlugins = [];
    // 使用process.env.NODE_ENV 来判断是开发环境还是生产环境
    if (process.env.NODE_ENV === 'production') {
        prodPlugins.push('transform-remove-console')
    }
    // 使用时把数组展开就可以了
    plugins:[...prodPlugins],

由于vue-cli 3.0工具生成的项目,默认隐藏了所有webpack的配置,如果我们需要对webpack配置进行修改,可以在根目录新建一个vue.config.js文件,配置详情请见cli.vuejs.org/zh/guide/we…

2. 在vue.config.js中使用chainWebpack的方式来配置不同的环境入口

  chainWebpack: config => {
    // entry获得默认的打包入口,clear清除,add添加新入口
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/prod-main.js')
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/dev-main.js')
    })
  }

3. 通过externals加载外部CDN资源

3.1 在vue.config.js中添加externals节点,添加到节点中的第三方依赖包都不会被打包

    // 采用键值对的方式,键为依赖包的名称,值为导出来后用来接收的名称
    config.when(process.env.NODE_ENV === 'production', config => {
        config.set('externals', {
            vue: 'Vue',
            axios: 'axios',
            'vue-router': 'VueRouter',
            'vue-quill-editor': 'VueQuillEditor',
            echarts: 'echarts',
            nprogress: 'NProgress',
        })
    }

3.2 在publice/index.html文件中引入CDN资源链接

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

4. 路由懒加载

4.1 安装插件,并挂载到babel配置文件的plugins数组中

    npm install --save-dev @babel/plugin-syntax-dynamic-import
    "plugins": ["@babel/plugin-syntax-dynamic-import"]

4.2 在用路由匹配组件时,使用import来导入就可以了

    // 如果我们想把某些组件打包在同一个文件中,可以使用注释的写法,来指定chunk name
    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')