电商后台管理系统——项目优化策略

谁践踏了优雅 2021-09-02 08:45 366阅读 0赞

# 一 通过 vue.config.js 修改webpack的默认配置 #

通过 vue-cli 3.0工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作的重心，放到具体功能和业务逻辑的实现上。

如果程序员有修改 webpack 默认配置的需求，可以在项目根目录，按需创建 vue.config.js 这个配置文件，从而对项目的打包发布过程做自定义的配置。

具体参考：https://cli.vuejs.org/zh/config/\#vue-config-js

// vue.config.js
    // 这个文件，应该导出一个包含了自定义配置选项的对象
    module.exports = {
        // 选项...    
    }

# 二 为开发模式与发布模式指定不同的打包入口 #

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

1 开发模式的入口文件：src/main-dev.js

2 发布模式的入口文件；src/main-proc.js

# 三 configureWebpack 和 chainWebpack #

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

在这里，configureWebpack 和 chainWebpack 的作用相同，唯一的区别是它们修改 webpack 配置的方式不同。

1 configureWebpack 通过链式编程的形式，来修改默认的 webpack 配置。

2 chainWebpack 通过操作对象的形式，来修改默认的 webpack 配置。

两者具体的使用差异，可参考如下：

[https://cli.vuejs.org/zh/guide/webpack.html][https_cli.vuejs.org_zh_guide_webpack.html]

# 四 通过 chainWebpack  自定义打包入口 #

1 修改 vue.config.js ，配置开发模式和发布模式的打包

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

2 测试方式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 五 通过 externals 加载外部 CDN 资源 #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

为了解决上面这个问题，可以通过 webpack 的externals 节点，来配置并加载外部的 CDN 资源。凡是声明在 externals 中的第三方依赖包，都不会被打包。

1 修改 vue.config.js

config.set('externals',{
        vue:'Vue',
        'vue-router':'VueRouter',
        axios:'axios',
        lodash:'_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor':'VueQuillEditor'
    })

2 在 public/index.html 文件头部，添加如下 CDN 资源引用

<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" />
    
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.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>
    
    <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>

3 优化结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

# 六 参考 #

[https://blog.csdn.net/Kobe\_k/article/details/107017630][https_blog.csdn.net_Kobe_k_article_details_107017630]

[https_cli.vuejs.org_zh_guide_webpack.html]: https://cli.vuejs.org/zh/guide/webpack.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/6beee88f43034e3ca4ab598bb5381646.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/66c59a5fabd345e6be0f85fdae2fc1b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/a45fe1466de24c16a0946f77b8c6a510.png
[https_blog.csdn.net_Kobe_k_article_details_107017630]: https://blog.csdn.net/Kobe_k/article/details/107017630