项目优化与上线

Posted 2020-11-23 flyerya

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插件来管理路由文件分类

具体可以看官方文档