vue项目优化篇总结

1，开发用到的log控制台打印设置为开发输出，运行不输出

安装： babel-plugin-transform-remove-console 开发依赖

//babel.config.js文件中加入

//这是项目发布阶段需要使用的babel插件
const prodplugins = []
//判断是运行环境还是开发环境
if (process.env.NODE_ENV === 'production') {
    prodplugins.push('transform-remove-console')
}

module.exports = {
        // 根据判断运行环境配置清除log打印
        ...prodplugins
    ]
}

2、通过 chainWebpack 自定义打包入口

开发完成后，可以根据需要将main.js分离成开发环境，生产环境

//创建vue.config.js文件
module.exports = {
    //设置打包入口文件,不同环境分离main.js文件，开发和实际运行有区别的时候
    chainWebpack: config => {
        //生产环境，main-prod.js
        config.when(process.env.NODE_ENV === 'production', config => {
                config.entry('app').clear().add('./src/main-prod.js')
            })
            //开发环境，main-dev.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文件
module.exports = {
    //设置打包入口文件,不同环境分离main.js文件，开发和实际运行有区别的时候
    chainWebpack: config => {
        //生产环境，main-prod.js
        config.when(process.env.NODE_ENV === 'production', config => {
                config.entry('app').clear().add('./src/main-prod.js')
                    //只在生产环境中需要配置
                    // 以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。 
                config.set('externals', {
                    vue: 'Vue',
                    'vue-router': 'VueRouter',
                    axios: 'axios',
                    lodash: '_',
                    echarts: 'echarts',
                    nprogress: 'NProgress',
                    'vue-quill-editor': 'VueQuillEditor'
                })
            })
    }
}

第二步、导入不打包的文件的CDN资源

在public下的index.html文件中引入js/css，

 <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

第三步

将main-prod.js文件（生产环境）中已经通过CDN导入过的js/css文件删除，这样打包的体积会极大的减小

4、首页内容定制

开发环境跟生产环境public下的index.html有区别，通过定制属性可以在一个文件下使用

第一步，在vue.config.js中设置，在html插件属性里，自定义一个属性

 //写在生产环境判断函数里
 config.plugin('html').tap(args => {
                    // isProd是自定义的参数
                    args[0].isProd = true
                    return args
                })

 //写在开发环境判断函数里
 config.plugin('html').tap(args => {
                // isProd是自定义的参数
                args[0].isProd = false
                return args
            })

第二步，在public下的index.html文件里加入如下代码

<title>
    <!-- 判断是不是开发模式，开发模式标题加上dev - -->
    <%= htmlWebpackPlugin.options.isprod?'':'dev -' %>测试标题
</title>

<!-- 判断是不是开发模式，开发模式引入以下css/js文件
    <% if(htmlWebpackPlugin.options.isprod){%>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />    
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
<%}%>

5、路由懒加载

官方介绍：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

第一步、安装 @babel/plugin-syntax-dynamic-import 开发依赖

第二步、在babel.config.js配置文件中加入

 "plugins": [
        [
        "@babel/plugin-syntax-dynamic-import"
    ]

第三步、修改router的index.js配置文件

//直接导入写法
// import login from '../components/login.vue'

//通过懒加载导入写法
const login = () =>
    import ( /* webpackChunkName: "login_Home_Welcome" */ '../components/login.vue')

项目上线相关配置

1. 通过 node 创建 web 服务器

const express = require('express') // 创建 web 服务器 const app = express() 
 
// 托管静态资源 app.use(express.static('./dist')) 
 
// 启动 web 服务器 app.listen(80, () => { 
  console.log('web server running at http://127.0.0.1') 
})

2. 开启 gzip 配置

使用 gzip 可以减小文件体积，使传输速度更快

// 安装相应包   
npm install compression -S   
//在web服务器配置文件（app.js） 导入包   
const compression = require('compression');   
// 启用中间件   一定要写在静态资源前面
app.use(compression());

来源：oschina

链接：https://my.oschina.net/u/4139437/blog/3189552

标签

vue

config