Tree Shaking
1. css Tree Shaking
yarn add purify-css purifycss-webpack -D
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')
// 去除无用的css
plugins: [
new PurifyCSSPlugin({
// 路劲扫描 nodejs内置 路劲检查
paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
})
]
2. js优化
yarn add webpack-parallel-uglify-plugin -D
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [
new WebpackParallelUglifyPlugin({
uglifyJS: {
output: {
beautify: false, //不需要格式化
comments: false //不保留注释
},
compress: {
warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
collapse_vars: true, // 内嵌定义了但是只用到一次的变量
reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
}
}
})
]
提取公共代码
大网站有多个页面，每个页面由于采用相同技术栈和样式代码，会包含很多公共代码 链接
// webpack4最新配置，可以搜索关键字查查配置项
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0, // This is example is too small to create commons chunks
name: 'common'
}
}
}
},
打包第三方类库
- DllPlugin插件： 用于打包出一个个动态连接库
- DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库
在package.json中
"scripts": {
"build": "webpack --mode development",
"build:dll": "webpack --config webpack.dll.config.js --mode development",
"dev": "webpack-dev-server --open --mode development"
}
新建webpack.dll.config.js
const path = require('path')
const webpack = require('webpack')
/**
* 尽量减小搜索范围
* target: '_dll_[name]' 指定导出变量名字
*/
module.exports = {
entry: {
vendor: ['jquery', 'lodash']
},
output: {
path: path.join(__dirname, 'static'),
filename: '[name].dll.js',
library: '_dll_[name]' // 全局变量名，其他模块会从此变量上获取里面模块
},
// manifest是描述文件
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]',
path: path.join(__dirname, 'manifest.json')
})
]
}
在webpack.config.js中
plugins: [
new webpack.DllReferencePlugin({
manifest: path.join(__dirname, 'manifest.json')
})
]
执行npm run build:dll 就可以打包第三方包了
使用happypack
HappyPack就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。 happypack
npm i happypack@next -D
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
{
test: /\.js$/,
// loader: 'babel-loader',
loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
include: [resolve('src')],
exclude: /node_modules/,
}
plugins: [
new HappyPack({
id: 'happy-babel-js',
loaders: ['babel-loader?cacheDirectory=true'],
threadPool: happyThreadPool
})
]
显示打包时间
yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
new ProgressBarPlugin({
format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
})
]
多页配置
entry: { //entry是一个字符串或者数组都是单页，是对象则是多页，这里是index页和base页
index: './pages/index/index.js',
base: './pages/base/base.js'
}
一个页面对应一个html模板，在plugin中
plugins: [
new HtmlWebpackPlugin({
template: './pages/index/index.html',
filename: 'pages/index.html',
hash: true,
chunks: ['index', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
new HtmlWebpackPlugin({
template: './pages/base/base.html',
filename: 'pages/base.html',
hash: true,
chunks: ['base', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
]
完整多页配置代码如下 git完整代码链接
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const Webpack = require('webpack')
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')
// let cssExtract = new ExtractTextWebpackPlugin('static/css/[name].css')
module.exports = {
entry: {
index: './pages/index/index.js',
base: './pages/base/base.js'
},
output: {
path: path.join(__dirname, 'dist'),
// name是entry的名字main，hash是根据打包后的文件内容计算出来的hash值
filename: 'static/js/[name].[hash].js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader']
})
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
query: {
presets: ['env', 'stage-0', 'react']
}
}
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0, // This is example is too small to create commons chunks
name: 'common'
}
}
}
},
plugins: [
new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
new HtmlWebpackPlugin({
template: './pages/index/index.html',
filename: 'pages/index.html',
hash: true,
chunks: ['index', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
new HtmlWebpackPlugin({
template: './pages/base/base.html',
filename: 'pages/base.html',
hash: true,
chunks: ['base', 'common'],
minify: {
removeAttributeQuotes: true
}
}),
new ExtractTextWebpackPlugin({
filename: 'static/css/[name].[hash].css'
}),
new PurifyCSSPlugin({
// 路劲扫描 nodejs内置 路劲检查
paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 9090,
host: 'localhost',
overlay: true,
compress: true // 服务器返回浏览器的时候是否启动gzip压缩
}
}
vue-cli几个重要路径
assetsRoot:构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录(static) 除了index.html，其余的js img css都分在这里
assetsPublicPath:项目目录 一个杠杠(/) 啥意思呢，是根目录的意思
