前端性能优化之vue-cli打包

最新推荐文章于 2024-08-30 10:14:23 发布

lxslxskxs

最新推荐文章于 2024-08-30 10:14:23 发布

阅读量488

点赞数

分类专栏：笔记 vue 文章标签：前端 webpack vue.js

本文链接：https://blog.csdn.net/lxs19930928/article/details/121638348

版权

笔记同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

vue

27 篇文章 4 订阅

订阅专栏

新建vue.config.js

vue.config.js
npm i uglifyjs-webpack-plugin -D
cnpm i uglifyjs-webpack-plugin -D
yarn add uglifyjs-webpack-plugin -D
(推荐使用yarn)

const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // js压缩，附带去除console
module.exports = {
  publicPath: './',
  productionSourceMap： false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
  outputDir: 'dist',
  assetsDir: 'assets',
  chainWebpack: config => {
    // sass引入全局的变量
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item.use('sass-resources-loader').loader('sass-resources-loader').options({
        // Provide path to the file with resources
        // 要公用的scss的路径
        resources: './src/assets/common.scss'
      }).end()
    });
    // js和css生成hash文件,这个也可以不用配置,vuecli底层也进行了配置，根据需要吧
    config.output.filename('./js/[name].[chunkhash:6].js');
    config.output.chunkFilename('./js/[name].[chunkhash:6].js');
    config.plugin('extract-css').tap(args => [{
        filename: 'css/[name].[contenthash:6].css',
        chunkFilename: 'css/[name].[contenthash:6].css'
    }]);
    // 图片压缩,这个一般不需要配置，vue-cli封装了，默认自动会转小图片为base64
    config.module.rule('images').use('url-loader')
    .tap(options => ({
        name: './assets/images/[name].[ext]',
        quality: 85,
        limit: 20000, //配置线上图片转base64
        esModule: false,
    }));
    // 压缩文件
    config.plugin("compression").use(CompressionPlugin, [
      {
        test: /\.(js|css)?$/i, // 哪些文件要压缩
        filename: "[path].gz[query]", // 压缩后的文件名
        algorithm: "gzip", // 使用gzip压缩
        minRatio: 0.8, // 压缩率小于0.8才会压缩
        deleteOriginalAssets: false, // 删除未压缩的文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false
      },
    ]);
    // 排除npm包
    config.externals({
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios",
    });
  },
  // 压缩 去除console.log
  configureWebpack: config => { 
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              // warnings: false,
              drop_debugger: true, // console
              drop_console: true,
              pure_funcs:['console.log'] // 移除console
            },
          },
          sourceMap: false,
          parallel: true,
        })
      )
    }
  },
  devServer: {
    // 前端解决跨域的问题
    host: "localhost",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    // open: false, //配置自动启动浏览器
    hotOnly: true, // 热更新
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": ""
        }
      },
    }
  },
  // 配合sass-resources-loader，防止报错
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: []
    }
  }
}

未使用uglifyjs-webpack-plugin插件的时候，显示921kb，很大的体积

使用uglifyjs-webpack-plugin插件的时候，是151kb,为原来的六分之一

使用externals之后，剔除第三方包，大小之后49.5kb，为使用uglifyjs之后的三分之一

使用第三方cdn，这里我推荐的是 https://www.jsdelivr.com/
public.html中引入 cdn文件

<!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><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- cdn的地址: https://www.jsdelivr.com/ -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.24.0/dist/axios.min.js"></script>
  </body>
</html>