参考文档：
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
- 避免重复引用第三方库
- 抽离公共的不常改的模块
网友评论