项目优化与上线

Posted flyerya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目优化与上线相关的知识,希望对你有一定的参考价值。

1.babel-plugin-transform-remove-console

去掉console的插件

//开发阶段不需要但是发布后需要用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === ‘production‘) {
    prodPlugins.push(‘transform-remove-console‘)
}


module.exports = {
    presets: [["@vue/cli-plugin-babel/preset", { "modules": false }]],
    plugins: [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ],
        //发布时候要用到到插件
        ...prodPlugins
    ]
}

 

 

2.build的时候用--report命令可以查看包的体积

 

 

3.通过配置vue.config.js

在vue.config.js导出的配置对象中,新增configureWebpack或chainWebpack节点,来自定义webpack的打包配置

configureWebpack和chainWebpack的作用相同,唯一的区别就是他们修改webpack的配置方式不同

configureWebpack通过操作对象的形式,来修改默认的webpack配置

chainWebpack则是通过链式编程的形式

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‘) }) } }

将main.js复制一份,一份为main-prod.js和main.dev.js

4.webpack的externals优化项目

默认情况下,通过import导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成后,单文件体积过大的问题

可以通过webpack的externals来配置并加载外部的CDN资源。

凡是声明在externals中的第三方依赖包,都不会被打包。

第一步 配置externals

module.exports = {
    chainWebpack: config => {
        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: ‘_‘,
                nprogress: ‘NProgress‘,
                ‘vue-quill-editor‘: ‘VueQuillEditor‘
            })
        })

        config.when(process.env.NODE_ENV === ‘development‘, config => {
            config.entry(‘app‘).clear().add(‘./src/main-dev.js‘)
        })
    }
}  

第二步  在public/index.html中引用静态资源

 <!-- css -->
    <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

    <!-- js -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>

    <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>


    <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>

    <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

 记得引用之后去掉之前导入的css文件

 

5.优化Element-UI

虽然在开发阶段,我们用element-UI组件按需加载,尽可能的减少来打包的体积,但是那些按需加载的组件,仍然占用来

较大的体积。

此时,我们可以将element-UI的组件也通过CDN的方式来加载,进一步减小打包后的体积

第一步

在main-prod.js中注释掉按需加载的代码

第二步

在index.html中通过CDN添加

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

 

6.index.html首页内容的修改

不同环境下,首页的内容会不同

module.exports = {
    chainWebpack: config => {
        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: ‘_‘,
                nprogress: ‘NProgress‘,
                ‘vue-quill-editor‘: ‘VueQuillEditor‘,
                ‘vue-moment‘: ‘VueMoment‘
            })

            //配置html参数
            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‘)
            //配置html参数
            config.plugin(‘html‘).tap(args => {
                args[0].isProd = false
                return args
            })
        })
    }
}  

然后在html中

<title><%= htmlWebpackPlugin.options.isProd ? ‘ : ‘dev-‘ %>后台管理系统</title>

<% if(htmlWebpackPlugin.options.isProd) { %>
    //CDN加载的资源
<% } %>

 

7.可以将路由的方式改为路由懒加载

使用路由懒加载后如果文件过多,可以使用(个人喜好)

@babel/plugin-syntax-dynamic-import插件来管理路由文件分类

具体可以看官方文档

 

以上是关于项目优化与上线的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目实战62项目优化上线准备+生成项目报告

VUE项目实战62项目优化上线准备+生成项目报告

Github介绍与使用

Github介绍与使用

VUE 项目如何快速优化?| 原力计划

Flutter上线项目实战——性能优化篇(未完待续)