webpack 打包优化实践

2021-08-04 本文已影响0人努力学习的小丸子

参考文档：
https://github.com/staven630/vue-cli4-config/tree/vue-cli3#hmr
https://segmentfault.com/a/1190000017547171

主要介绍webpack配置，用来提升打包速度和压缩打包体积。有：图片压缩配置、热模块替换配置、打包速度优化等。

图片压缩配置——image-webpack-loader 和 url-loader

Image-webpack-loader
确保电脑上安装了windows-build-tools。
查看npm 全局安装包命令：npm list -g --depth 0
安装方式如下：windows上使用npm install -g windows-build-tools 命令注意用管理员身份运行。

// vue.config.js
// 效果：可以将图片压缩10倍。1M的压缩为100K，300K的压缩为30K。
chainWebpack: *config*  => {
  config.module
 .rule('images')
 .use('image-webpack-loader')
 .loader('image-webpack-loader')
 .options({
  mozjpeg: { progressive: true, quality: 65 },
  optipng: { enabled: false },
  pngquant: { quality: [0.65, 0.9], speed: 4 },
  gifsicle: { interlaced: false },
  webp: { quality: 75 }
 })
 }

url-loader

// vue.config.js
// 效果：将小于8192b的文件转码成base64图片，减少网络请求。但对于base64的图片，浏览器不会缓存。
chainWebpack: *config*  => {
  config.module
 .rule('images')
 .use('url-loader')
 .tap(*options*  =>  Object.assign(options, {
  limit: 8192
 }));

热模块替换配置——HMR

// 在vue.config.js中配置以下插件，每次更新文件时会报错：
configureWebpack: {
  plugins: [
  new  webpack.NamedModulesPlugin(),
  new  webpack.HotModuleReplacementPlugin(),
]
}
// 直接使用下面的配置：
chainWebpack: *config*  => {
config.resolve.symlinks(true)
}
devServer: {
hot: process.env.NODE_ENV  ===  "development",
}

打包速度优化——thread_loader (happyPack)和 webpack-parallel-uglify-plugin
作用：happyPack，多线程解释js和css。
webpack-parallel-uglify-plugin ：多线程压缩js和css.uglifyjs-webpack-plugin压缩js文件是单线程的

const  HappyPack  =  require('happypack');
const  os  =  require('os');
const  happyThreadPool  =  HappyPack.ThreadPool({
  size: os.cpus().length
});
const  ParallelUglifyPlugin  =  require('webpack-parallel-uglify-plugin');
configureWebpack: {
plugins: [
new  HappyPack({
  *//**用**id**来标识* *happypack**处理那里类文件*
  id: 'happyBabel',
  *//**如何处理**用法和**loader* *的配置一样*
  loaders: [{
  loader: 'babel-loader?cacheDirectory=true',
 }],
  *//**共享进程池*
  threadPool: happyThreadPool,
  *//**允许* *HappyPack* *输出日志*
  verbose: true,
 }),
  *//* *使用* *ParallelUglifyPlugin* *并行压缩输出**JS**代码*
  new  ParallelUglifyPlugin({
  *//* *传递给* *UglifyJS**的参数如下：*
  uglifyJS: {
  output: {
  beautify: false,
  comments: false
 },
  compress: {
  */**
*是否在**UglifyJS**删除没有用到的代码时输出警告信息，默认为输出，可以设置为**false**关闭这些作用*
*不大的警告*
 **/*
  warnings: false,
  */**
*是否删除代码中所有的**console**语句，默认为不删除，开启后，会删除所有的**console**语句*
 **/*
  drop_console: true,
  */**
*是否内嵌虽然已经定义了，但是只用到一次的变量，比如将* *var x = 1; y = x,* *转换成* *y = 5,* *默认为不*
*转换，为了达到更好的压缩效果，可以设置为**false*
 **/*
  collapse_vars: true,
  */**
*是否提取出现了多次但是没有定义成变量去引用的静态值，比如将* *x = 'xxx'; y = 'xxx'* *转换成*
 *var a = 'xxxx'; x = a; y = a;* *默认为不转换，为了达到更好的压缩效果，可以设置为**false*
 **/*
  reduce_vars: true
 }
 },
  test:  /.js$/g,
 }),
]
}

使用html-webpack-plugin来生成html文件，当script标签引入的js名称是不确定的，尤其有用.
使用clean-webpack-plugin来每次打包时清理dist文件夹.
使用webpack.ProvidePlugin来使能第三方库.

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
});
new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default'],
});

解释css文件——style-loader和css-loader
css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
style-loader 把 CSS 插入到 DOM 中。
如果想要将css提取为一个文件，不存储在Js模块中，可以使用mini-css-extract-plugin或者extract-css-chunks-webpack-plugin
不要将 style-loader 于 mini-css-extract-plugin 一起使用。建议开发环境使用 style-loader ，生产环境使用 mini-css-extract-plugin
加载图片和字体——file-loader和url-loader
配置gzip——compression-webpack-plugin

const CompressionPlugin = require("compression-webpack-plugin");
new CompressionPlugin({
    filename: '[path].gz[query]',
     algorithm: "gzip",
     test: /\.js$|\.html$/,
     threshold: 10240,
     minRatio: 0.8,
     deleteOriginalAssets: true
  })

配置编译时的变量替换——DefinePlugin
DefinePlugin 允许在编译时将你代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时，非常有用。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});
console.log('Running App version ' + VERSION);

分析打包之后的js文件——BundleAnalyzerPlugin
会启动一个服务，在指定端口展示js文件里包含的内容。

const BundleAnalyzerPlugin =
  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin({ analyzerPort: 6000 })],
  },
};

12.打包不常用模块为静态资源——DllPlugin
https://juejin.cn/post/6844903490620391438
13.配置打包分包——SplitChunkPlugin

避免重复引用第三方库
抽离公共的不常改的模块

webpack 打包优化实践

猜你喜欢

热点阅读