打包的一些简单优化

环境

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

打包的一些简单优化

环境

tree shaking 作用

文件结构

package.json

/src/js 中代码

/src/template/index.html 模版文件

/build/下的打包配置文件

打包命令（package.json 中 script 中配置的）

相关推荐