vue-cli4打包最强优化（10M变300kb）

最新推荐文章于 2024-09-13 08:57:17 发布

仰.

最新推荐文章于 2024-09-13 08:57:17 发布

阅读量596

点赞数

分类专栏： vue 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/QWERTYQ16/article/details/122474248

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一.项目开始时webpack配置

vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。

一、配置 proxy 跨域

配置跨域步骤https://blog.csdn.net/QWERTYQ16/article/details/122243175?spm=1001.2014.3001.5502

二、配置 alias 别名

使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

配置完成后，我们在项目中可以这样写路径

//之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'

二.项目结束后打包前webpack配置

目的：

提高打包速度
减小项目体积、提高首屏加载速度
提高用户体验（骨架屏）

打包前必做：
项目开发完成后，运行npm run build进行打包操作。打包前对webpack配置。

module.exports = {
  publicPath: './', // 静态资源路径（默认/，打包后会白屏）
  outputDir: 'dist', // 打包后文件的目录 （默认为dist）
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录  默认为‘’没有单独目录js/css/img在根目录中。
  }

1.去除生产环境sourceMap，在vue.config.js中

module.exports = {
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

2、去除console.log打印以及注释

先下载插件，然后在把下面的代码粘贴进去

cnpm install uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

  configureWebpack: config => {
    const plugins = [];
    if (isProduction) {
      plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },

然后为这样：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
    publicPath: './', // 静态资源路径（默认/，打包后会白屏）
    productionSourceMap: false,
    devServer: { //开发环境的服务器配置
        // 是否自动弹出浏览器，默认false
        open: false,
        // 修改默认端口，默认8080
        port: 9090,
        proxy: { //进行代理转发
            '/api': {
                // 转发的网址
                target: "http://120.53.31.103:84/api/app",
                // 是否开启本地代理 默认true
                changeOrigin: true,
                // 重要点
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

    },
    configureWebpack: config => {
        const plugins = [];
        if (isProduction) {
            plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        output: {
                            comments: false, // 去掉注释
                        },
                        warnings: false,
                        compress: {
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            )
        }
    },
}

3、使用CDN 加速优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

把下面的代码粘进去：

 config.externals = externals


  
configureWebpack: config => {
 chainWebpack: config => {
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    config.plugin('html').tap(args => {
      if (isProduction) {
        args[0].cdn = cdn.build
      } else {
        args[0].cdn = cdn.dev
      }
      return args
  }

}

然后为这样：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
// externals
const externals = {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        vuex: 'Vuex',
        vant: 'vant',
        axios: 'axios'
    }
    // CDN外链，会插入到index.html中
const cdn = {
    // 开发环境
    dev: {
        css: [],
        js: []
    },
    // 生产环境
    build: {
        css: ['https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css'],
        js: [
            'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
            'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
            'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
            'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
            'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
        ]
    }
}
module.exports = {
    publicPath: './', // 静态资源路径（默认/，打包后会白屏）
    productionSourceMap: false,
    devServer: { //开发环境的服务器配置
        // 是否自动弹出浏览器，默认false
        open: false,
        // 修改默认端口，默认8080
        port: 9090,
        proxy: { //进行代理转发
            '/api': {
                // 转发的网址
                target: "http://120.53.31.103:84/api/app",
                // 是否开启本地代理 默认true
                changeOrigin: true,
                // 重要点
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

    },
    configureWebpack: config => {
        const plugins = [];
        if (isProduction) {
            config.externals = externals
            plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        output: {
                            comments: false, // 去掉注释
                        },
                        warnings: false,
                        compress: {
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            )
        }
    },
    chainWebpack: config => {
        /**
         * 添加CDN参数到htmlWebpackPlugin配置中
         */
        config.plugin('html').tap(args => {
            if (isProduction) {
                args[0].cdn = cdn.build
            } else {
                args[0].cdn = cdn.dev
            }
            return args
        })
    }
}

在 public/index.html 中添加：

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

然后为这样：

<!DOCTYPE html>
<html lang="">

<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 id="titleId">
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2888203_ubo6ra3nyq.css">
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
        htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
        <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
        <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
        <% } %>
            <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
            <% for (var i in
        htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
                <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
                <% } %>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

4、对资源文件进行压缩

6.直打包改变的文件

在vue.config.js中的configureWebpack: config => { }中写入：

const { HashedModuleIdsPlugin } = require('webpack');
configureWebpack: config => {    
    const plugins = [];
    plugins.push(
        new HashedModuleIdsPlugin()
    )
}

7.公共代码抽离

// 公共代码抽离
configureWebpack: config => {
//....
//优化项配置
config.optimization = {
    splitChunks: { // 分割代码块
        cacheGroups: {
            vendor: {//第三方库抽离
                chunks: 'all',
                test: /node_modules/,
                name: 'vendor',
                minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 100//权重
            },
            common: {  //公用模块抽离
                chunks: 'all',
                test: /[\\/]src[\\/]js[\\/]/,
                name: 'common',
                minChunks: 2,在分割之前，这个代码块最小应该被引用的次数
                maxInitialRequests: 5,
                minSize: 0,//大于0个字节
                priority: 60
            },
            styles: { //样式抽离
                name: 'styles',
                test: /\.(sa|sc|c)ss$/,
                chunks: 'all',
                enforce: true
            },
            runtimeChunk: {
                name: 'manifest'
            }
        }
    }
}
}