vue-cli项目的简单优化

2021-01-26

有关vue-cli项目的简单优化策略

在项目上线之前，通常都会对项目进行优化，以便提高运行效率。该篇文章将会在一下几个方面对vue项目进行简单优化。

1 安装移除项目中console语句

该策略是进行移除项目中的console命令，为了更好的方便开发者，使得在开发阶段能够显示控制台的信息，发布阶段控制台不显示信息，进行一些改动
1.安装bable-plugin-transform-remove-console

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

2.在babel.config.js进行配置

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

plugins: [
    [
    'component',
    {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
    }
    ],
    // 发布产品时的插件数组
    ...productionPlugins,
]

在根目录下新建vue.config.js，利用vue.config.js修改webpack默认的配置，为开发模式与发布模式指定不同的打包入口。

2 通过chainWebpack自定义打包入口

因为项目分为开发模式和发布模式，需要通过自定义打包入口进行分辨。
将main.js重命名为main-dev.js，复制文件的内容，新建main-prod.js，将复制的内容粘贴。
在vue.config.js文件中添加如下代码

//修改webpack默认配置
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')
    })
}
}

3 通过externals加载外部CDN资源

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

config.when(process.env.NODE_ENV === 'production',config => {
        config.entry('app').clear().add('./src/main-prod.js')
        config.set('externals',{
            vue:'Vue',
            'vue-router':'VueRouter',
            axios:'axios',
            loadsh:'_',
            echarts: 'echarts',
            nprogress:'Nrogress',
            'vue-quill-editor':'VueQuillEditor'
        })
        config.plugin('html').tap(args => {
            args[0].isProd = true
            return args
        })

    })

然后就可以在main-prod.js中注释掉import导入的css,js代码，在public/index.html添加外部cdn资源。

4 首页内容定制

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

config.when(process.env.NODE_ENV === 'production',config => {
        config.entry('app').clear().add('./src/main-prod.js')
        config.plugin('html').tap(args => {
            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 => {
            args[0].isProd = false
            return args
        })
    })

在public/index.html首页中，可以根据isProd 的值，来决定如何渲染页面结构:

<title><%= htmlWebpackPlugin.options.isProd ? '': 'dev-'%>站点标题</title>

<!--按需加载外部的CDN资源-->
<% if (htmlwebpackPlugin.options.isProd){%>
    
    
        
    <%}%>< code>

5 路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，提高效率。
具体需要3步:
1.安装@babel/plugin-syntax-dynamic-import包
2.在babel.config.js配置文件中声明该插件

// 发布产品时的插件数组
    ...productionPlugins,
    "@babel/plugin-syntax-dynamic-import"

3.将路由改为按需加载的形式，示例代码如下
在router文件中，将import导入的自己注释掉，换成如下代码

// import Users from '../components/Users.vue'
const Users = () => import(/* webpackChunkName: "users-rights-roles" */ '../components/Users.vue')
const Rights = () => import(/* webpackChunkName: "users-rights-roles" */ '../components/Rights.vue')
const Roles = () => import(/* webpackChunkName: "users-rights-roles" */ '../components/Roles.vue')

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/01/26/project-optimization/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------