定位 webpack 大的原因
这里推荐使用 webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序，她可以将内容束展示为方便交互的直观树状图，让你明白你所构建包中真正引入的内容；我们可以借助她，发现它大体有哪些模块组成，找到不合时宜的存在，然后优化它。我们可以在 项目的 package.json 文件中注入如下命令，以方便运行她(npm run analyz)，默认会打开 http://127.0.0.1:8888 作为展示。
“analyz”: “cross-env NODE_ENV=production npm_config_report=true npm run build”
按需异步加载模块
关于前端开发优化，重要的一条是，尽可能合并请求及资源，如常用的请求数据合并，压缩合并 js，构造雪碧图诸此等等（当然得适当，注意体积，过大不宜）；但，同时也当因需制宜，根据需要去异步加载，避免无端就引入早成的浪费。webpack 也是内置对这方面的支持； 假如，你使用的是 Vue，将一个组件（以及其所有依赖）改为异步加载，所需要的只是把：
import Foo from './Foo.vue'
改写成：const Foo = () => import('./Foo.vue')
如此分割之时，该组件所依赖的其他组件或其他模块，都会自动被分割进对应的 chunk 里，实现异步加载，当然也支持把组件按组分块，将同组中组件，打包在同个异步 chunk 中。如此能够非常有效的抑制 Javascript 包过大，同时也使得资源的利用更加合理化。
生产环境，压缩混淆并移除console
现代化中等规模以上的开发中，区分开发环境、测试环境和生产环境，并根据需要予以区别对待，已然成为行业共识；可能的话，还会有预发布环境。对待生产环境，压缩混淆可以很有效的减小包的体积；同时，如果能够移除使用比较频繁的 console，而不是简单的替换为空方法，也是精彩的一笔小优化。如果使用 UglifyJsPlugin 插件来压缩代码，加入如下配置，即可移除掉代码中的 console：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
},
sourceMap: false
})
相关依赖
{
"name": "xuhengfeng",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"@babel/core": "^7.1.5",
"@babel/preset-env": "^7.1.5",
"autoprefixer": "^9.3.1",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.2.0",
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.25.1",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-dev-server": "^3.1.10"
},
"devDependencies": {
"webpack-cli": "^3.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --open",
"dev": "webpack-dev-server --open --mode development ",
"build": "webpack --mode production ",
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
},
"author": "",
"license": "ISC"
}
webpack.config.js配置
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = module.exports = {
entry: ['babel-polyfill', path.join(__dirname, 'js/falls.js')],
output: {
filename: 'bundle.[name].[hash:8].js',
path: path.join(__dirname, 'dist'),
publicPath: '/'
},
devServer: {//配置此静态文件服务器，可以用来预览打包后项目
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
port: 9090,
compress: true
},
module: {
rules: [
{
test: /\.js$/, // 处理以.js结尾的文件
exclude: /node_modules/, // 处理除了nodde_modules里的js文件
loader: 'babel-loader' // 用babel-loader处理
},
{
test: /\.css$/,
exclude:/node_modules/,
loader:['style-loader','css-loader', 'postcss-loader']
},
{
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.scss$/,
loader: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),//清除dist目录
new HtmlWebpackPlugin({//输出html
filename: 'index.html',
template: path.resolve(__dirname,'index.html'),//模板
hash: true,//防止缓存
minify: {
minimize: true,
removeConments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
}
}),
new BundleAnalyzerPlugin(),//分析文件大小
new CopyWebpackPlugin([{//复制静态文件
from: path.join(__dirname, 'css'), // 从哪里复制
to: path.join(__dirname, 'dist', 'css') // 复制到哪里
},{
from: path.join(__dirname, 'js'),
to: path.join(__dirname, 'dist', 'js')
},{
from: path.join(__dirname, 'imgs'),
to: path.join(__dirname, 'dist', 'imgs')
}])
]
}
网友评论