前端性能优化(2.1 代码分离——入口起点 entry point)
入口起点分离: 使用 entry 手动的分离代码。(配置多,并且有一些隐患,不建议使用)
project
webpack-demo |- package.json |- webpack.common.js
|- webpack.prod.js
|- webpack.dev.js |- /dist |- /src |- index.js |- another-module.js |- /node_modules
another-module.js
import _ from 'lodash' console.log( _.join(['Another', 'module', 'loaded!'], ' ') )
index.js
import _ from 'lodash' function component () { const element = document.createElement('div') element.innerHTML = _.join(['Hello', 'webpack'], ' ') return element } document.body.appendChild(component())
webpack.common.js
使用 optimization.splitChunks 防止重复模块
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 从 webpack v4 开始,移除了 CommonsChunkPlugin,取而代之的是 optimization.splitChunks module.exports = { entry: { index: './src/index.js', another: './src/another-module.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin(), new CleanWebpackPlugin() ], optimization: { splitChunks: { /** * 1. async,默认值,表示异步引入的模块 * 2. initial,同步引入的模块 * 3. all,两者皆可 */ chunks: 'all' } } }
webpack.dev.js
const {merge} = require('webpack-merge') const common = require('./webpack.common') module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', port: 3000, open: true } })
webpack.prod.js
const {merge} = require('webpack-merge') const common = require('./webpack.common') module.exports = merge(common, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', port: 3000, open: true } })