vue项目上线前优化(路由懒加载的使用,外部CDN的使用)

引

当使用vue做完项目后，接下来当然是要进行线上部署了。但是在上线之前还是可以做很多方面优化的，可以让项目上线后的体验更加哦。

若是使用了vue-cli的话，可以从面板界面直观的看到各项数据，控制台也会输出些提示信息，通过这些信息就能更好的优化项目了。

清除控制台的输出

在项目开发的时候，经常会在控制台输出些信息，方便进行调试，但是这些console.log()在上线后往往都是不需要的。如果一个个手动删掉，不仅麻烦，而且后期还要调试的时候可能也会有些不便。使用transform-remove-console插件就能比较好的解决这个问题。

1. 安装插件

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

1. 在babel.config.js中进行配置

{
  "plugins": ["transform-remove-console"]
}

1. 如果仅是要在开发环境中使用可以通过，判断env进行添加

// 发布模式需要用到的插件数组
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

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

• transform-remove-console配置

路由懒加载的使用

官方说明：路由懒加载

1. 使用了Babel，则需要添加 syntax-dynamic-import 插件才能正常解析。可在面板中添加依赖或：

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

1. 在babel.config.js中plugin节点添加:

"@babel/plugin-syntax-dynamic-import"

1. 使用动态import,也可以分组

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-two" */ './Baz.vue')

• 插件使用文档

外部CDN的使用

在项目运行后，可以看到有些js文件非常的大，这是因为默认情况下，import导入的包，最后被webpack打包合并到一个文件了。太大的文件非常的不利于加载。这时可以配置webpack,常用的包使用外部CDN进行加载。

在vue项目中默认隐藏了对webpack的配置，要时自定义的配置需要手动的根目录创建vue.config.js进行配置。

webpack中可以通过externals节点对需要外部加载的包进行配置，在节点中的三方依赖包都不会被打包。

常用的CDN源：bootcdn staticfileCDN jsdelivr 又拍云免费JS库

当然使用这些公共的CDN更加方便，当然它们也是有故障的可能，并且也发送过故障。

vue.config.js

module.exports = {
  chainWebpack: config => {
    // 通过process.env.NODE_ENV对当前的环境进行判断
    // 发布模式
    config.when(process.env.NODE_ENV == 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      // externals指定要排除包
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
      })
     // 是plugin在public/index.html中添加变量
     // 用以判断运行的环境是否是发布
      config.plugin('html').tap(args => {
        args[0].isDev = false
        return args
      })
    })
}

public/index.html中添加要导入的CDN

<% if(!htmlWebpackPlugin.options.isDev){ %>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<% } %>

element-ui的处理

不用在externals中指定，直接在main.js中删掉导入import,然后在index.html中添加CDN。

服务端开启Gzip压缩

这里的话就要在服务器端进行配置了，比如：

在nginx中开启，要在nginx.conf中有gzip on,当然也可进行配置：

    gzip on;  开启压缩
        gzip_min_length 1k;   设置压缩最小单位，小于不压缩
    #gzip_disable "msie6";

    # gzip_vary on;
    # gzip_proxied any;
    gzip_comp_level 4;  压缩比
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;  压缩内容

vue.config.js 配置参考