vue打包的优化

小灰灰 2022-11-15 14:19 208阅读 0赞

## 打包 ##

根目录创建vue.config.js文件

module.exports = {
        publicPath:'./'
    }

cmd

vue ui

进入可视化工具先启动项目启动App

停止运行 ，再运行build

最后去dist 里index.html打开预览

## 优化console.log ##

强制隐藏console.log（在index.html里面写入）

按需隐藏显示console.log（在babel.config,js里写入）

babel-plugin-transform-remove-console 开发依赖

//项目发布阶段需要用到的babel插件
    const productPlugins = []
    
    //判断是开发还是发布阶段
    if (process.env.NODE_ENV === 'production') {
      //发布阶段
      productPlugins.push("transform-remove-console")
    }
    
    module.exports = {
      "presets": [
        '@vue/cli-plugin-babel/preset'
      ],
      "plugins": [
        // [
        //   "component",
        //   {
        //     "libraryName": "element-ui",
        //     "styleLibraryName": "theme-chalk"
        //   }
        // ],
        ...productPlugins
      ]
    
    }

## 路由懒加载 ##

{
            path: '/roles',
            name: 'Roles',
            component: () => import(/* webpackChunkName: "模块名字" */ '../components/power/roles.vue'),
          },

## webpack的默认配置修改入口文件 ##

vue.config.js文件中添加以下

module.exports = {
    
        chainWebpack:config=>{
            //发布模式
            config.when(process.env.NODE_ENV === 'production',config=>{
                //entry找到默认的打包入口，调用clear则是删除默认的打包入口
                //add添加新的打包入口
                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-prod.js main-dev.js 创建这俩文件内容是main.js里的东西， 删除main.js

完成这一步以后一定要启动下项目。

## 加载外部CDN ##

安装externals 开发依赖

vue.config.js文件中添加以下

module.exports = {
        chainWebpack:config=>{
            //发布模式
            config.when(process.env.NODE_ENV === 'production',config=>{
                //entry找到默认的打包入口，调用clear则是删除默认的打包入口
                //add添加新的打包入口
                config.entry('app').clear().add('./src/main-prod.js')
    
                //使用externals设置排除项
                config.set('externals',{
                    vue:'Vue',
                    'vue-router':'VueRouter',
                    axios:'axios',
                    lodash:'_',
                    echarts:'echarts',
                    nprogress:'NProgress',
                    'vue-quill-editor':'VueQuillEditor'
                })
            })
            //开发模式
            config.when(process.env.NODE_ENV === 'development',config=>{
                config.entry('app').clear().add('./src/main-dev.js')
            })
        }
    }

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。  
打开开发入口文件main-prod.js,删除掉默认的引入代码

例如：在main-prod.js    里
    // //ElementUI配置信息
    // import ElementUI from 'element-ui';
    // import 'element-ui/lib/theme-chalk/index.css';
    // Vue.use(ElementUI);

cv进publick 里面的index.html header里， 然后修改版本号跟package.json 里最好一样

<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" />
            
            <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.6.11/vue.min.js"></script>
            <script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
            <script src="https://cdn.staticfile.org/axios/0.21.0/axios.min.js"></script>
            <script src="https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js"></script>
    
            <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.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.6/dist/vue-quill-editor.js"></script>
        
            
            <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

## 定制首页内容 ##

vue.config.js文件中添加以下

module.exports = {
        chainWebpack:config=>{
            config.when(process.env.NODE_ENV === 'production',config=>{
                ......
                
                //使用插件
                config.plugin('html').tap(args=>{
                    //添加参数isProd
                    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=>{
                    //添加参数isProd
                    args[0].isProd = false
                    return args
                })
            })
        }
    }

然后在public/index.html中使用插件判断是否为发布环境并定制首页内容

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    
        <% if(htmlWebpackPlugin.options.isProd){ %>
        
        <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
        ........
        
        <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
        <% } %>
      </head>
      .......