打包的一些简单优化
Posted heidekeyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了打包的一些简单优化相关的知识，希望对你有一定的参考价值。
环境
win10 + webstrom 2019 + webpack4.x + yarn
tree shaking 作用
生产环境自动启用
开发模式需要配置（过滤不适用的模块），打包后的 js 会有一些注释如：
/*! exports provided: add, sub, mul */ /*! exports used: add, mul */
文件结构
. ├── build //配置文件 │ ├── build.js │ ├── bundle.js │ ├── common.js │ └── dev.js ├── dist //打包后生成的目录 │ ├── 6efdf170-app.js │ └── index.html ├── package.json ├── src │ ├── js │ │ ├── app.js │ │ └── math.js │ └── template │ └── index.html └── yarn.lock
package.json
"name": "sample", "version": "1.0.0", "private": true, "license": "MIT", "sideEffects": [ "*.css" ], "scripts": "bundle": "webpack --config ./build/bundle.js", "build": "webpack --config ./build/build.js", "dev": "webpack-dev-server --config ./build/dev.js" , "devDependencies": "clean-webpack-plugin": "^3.0.0", "html-webpack-plugin": "^3.2.0", "webpack": "^4.33.0", "webpack-cli": "^3.3.3", "webpack-dev-server": "^3.7.1", "webpack-merge": "^4.2.1"
/src/js 中代码
app.js
import add, mul from ‘./math.js‘; console.log("add(11 + 11): ", add(11, 11)); console.log("mul(11 + 11): ", mul(11, 11)); window.document.body.innerHTML = ‘<h1>hello world</h1>‘;
math.js
export const add = function (a, b) return a + b; , sub = function (a, b) return a - b; , mul = function (a, b) return a * b; ;
/src/template/index.html 模版文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> </body> </html>
/build/下的打包配置文件
build.js
const common = require(‘./common.js‘); const merge = require(‘webpack-merge‘); module.exports = merge(common, mode: ‘production‘, devtool: ‘cheap-module-source-map‘ );
bundle.js
const common = require(‘./common.js‘); const merge = require(‘webpack-merge‘); module.exports = merge(common, mode: ‘development‘, devtool : ‘cheap-module-eval-source-map‘, optimization: usedExports: true );
common.js
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); const CleanWebpackPlugin = require(‘clean-webpack-plugin‘); module.exports = entry: app: ‘./src/js/app.js‘ , output: filename: ‘[hash:8]-[name].js‘ , plugins: [ new HtmlWebpackPlugin( template: ‘./src/template/index.html‘ ), new CleanWebpackPlugin() ] ;
dev.js
const common = require(‘./common.js‘); const bundle = require(‘./bundle.js‘); const merge = require(‘webpack-merge‘); const path = require(‘path‘); module.exports = merge(common, bundle, devServer: contentBase: path.resolve(‘../dist‘), host: "127.0.0.1", port: 12858, hot: true, hotOnly: true, );
打包命令（package.json 中 script 中配置的）
#开发环境，启动服务器 yarn dev #开发环境，打包文件 yarn bundle #生产环境， 打包文件 yarn build
以上是关于打包的一些简单优化的主要内容，如果未能解决你的问题，请参考以下文章