Webpack如何打包才能尽可能的缩小体积(详解)
程序员文章站
2024-02-10 16:04:34
...
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
当前各大主流框架默认配备的打包方案,对其如何使用,已有较完备中英文文档;并且,各主流框架也有对应 CLI
予以基础配置,故不作为探讨范畴。从产品层来讲,如何使得构建的包体积小、运行快,这有必要不断摸索实践,提炼升级,使之臻于最佳。本文将从以下些许方面,对 Webpack
打包体积方面,做下优化探讨
1、去除不必要的插件
3、分离CSS
安装插件:npm install extract-text-webpack-plugin --save
5、提取第三方库像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置
6、webpack 插件列表。例如,当多个 bundle 共享一些相同的依赖,
7、按需打包
刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如
HotModuleReplacementPlugin
, NoErrorsPlugin
... 这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。
2、去除devtool选项
很多教程都会教你在webpack.config.js中设置devtool选项,比如devtool: 'eval-source-map'。但是这只适用于开发环境,这会造成打包的文件往往有几M,所以在生产环境必须去除此配置
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//webpack.config.js
...
loaders:[
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
...
...
plugins: [
...
new ExtractTextPlugin("bundle.css")
]
4、使用webpack.optimize.UglifyJsPlugin插件压缩混淆js代码,使用方法如下:
plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({ warnings: false,
compress: {
join_vars: true,
warnings: false,
},
toplevel: false,
ie8: false,
}),]
5、提取第三方库像 react 这个库的核心代码就有 627 KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在 webpack 中设置
{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}
6、webpack 插件列表。例如,当多个 bundle 共享一些相同的依赖,CommonsChunkPlugin
有助于提取这些依赖到共享的 bundle 中,来避免重复打包。可以像这样添加
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry:
{
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'//不使用[name],并且插件中没有filename,这输出文件中只用chunk.js的内容,
main.js的内容不知跑哪里去了
},
plugins: [
new CommonsChunkPlugin({
name:"chunk",
filename:"chunk.js"//忽略则以name为输出文件的名字,否则以此为输出文件名字
})
]
};
使用Lodash时,往往只需要使用其中部分功能,但整个文件引入是不合理的,我们需要通过插件让Webpack按需引入模块。
配置webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
module: {
loaders: [{
loader: 'babel',
test: /\.js$/,
exclude: /node_modules/
}]
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime', 'lodash']
},
plugins: [
new LodashModuleReplacementPlugin,
new webpack.optimize.OccurrenceOrderPlugin,
new webpack.optimize.UglifyJsPlugin
]
}