webpack 4 - js(tree-shaking) 2018-10-26

? 面试题

	['1','3','10'].map(parseInt)
	

webpack 魔法注释

import(/* webpackChunkName: moduleA */’./moduleA.js’)

安装插件
** 报错 删node_modules包  npm install
npm install --save-dev @babel/plugin-syntax-dynamic-import
在 .babelrc 里面添加：
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

• import 的用法

1.const asyun = import(/* webpackChunkName: “moduleA” /’./async’);
2.import(/ webpackChunkName: “moduleA” /’./async’).then()
3.function async () { return import(/ webpackChunkName: “moduleA” */’./async’)}

thee shaking配置

npm run pord 才开启tree shaking
npm webpack-deep-scope-plugin (深度tree shaking)

	//	js tree shaking
	// js src/component /sync
	import {isArray as a} from 'lodash-es';
	const sync = function() {
	  console.log('sync')
	}
	const isArray = function(args) {
	  console.log(a(args));
	
	}
	export { sync, isArray }

	// src/index		
	> 注意没有用isArray 对比 差异 {isArray} 与lodash from 。。。
		import {sync, isArray} from './components/sync';
		console.log('hello yideng webpack');
		sync();
	

css tree-shaking

1. use: [“style-loader”,“css-loader”]

css module

        2 .    use: ['style-loader', {
                     loader: 'css-loader?modules'
                     		// class 为md5的值
                     	// 改class形式 
                     																		// name 文件夹的名字
                     																		// local 类的名字
                     			// 'css-loader?modules&localIdentName=[name]_[loacal]-[hash:5]'
               }]
               // 示例 import css from './style.css'
                 var div = document.createElement('div');
 					div.innerHTML = 'zhong';
 					div.className = css.test; 

css tree shaking

提取css

	npm i mini-css-extract-plugin -D 
	* 不能用style-loader 
	* 改为
	MiniCSSextractPlugin.loader
	css-loader 不能采用module模式
	* webpack 3.0 用 extract-text-webpack-plugin

npm i purifycss-webpack purify-css -D //

webpack 4 minimize 配置 uglifyjs (压缩js)

• npm i uglifyjs-webpack-plugin -D

 minimizer: [
            new Uglifyjs({
                uglifyOptions: {
                    // ecma那个标准
                    ecma: 6,
                    // 是否用缓存
                    cache: true,
                    // 并行
                    parallel: true
                }
            })
        ]

清除文件夹的插件

clean-webpack-plugin

	
	plugins :[
		        new CleanWebpackPlugin(['build'])
	]

html 模版

npm i html-webpack-plugin -D
new HtmlWebpackPlugin({
filename: ‘index.htlm’,
template: ‘./src/index.html’
})

webpack optimization 优化

//
{
  // 优化
  optimization: {
    // 块分割 
    splitChunks: {
      chunks: 'async',// 选择哪些块进行优化 all| async | inital 
      minSize: 30000, // 要生成的块的最小大小（以字节为单位）
      maxSize: 0, // 
      minChunks: 1, // 分割前必须共享模块的最小块数
      maxAsyncRequests: 5, // 按需加载时的最大并行请求数。
      maxInitialRequests: 3,// 入口点处的最大并行请求数。
      automaticNameDelimiter: '~', // 指定用于生成的名称的分隔符。
      name: true, // 拆分块的名称。 bool | function
      
      // 缓存组
      cacheGroups: { 
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10 // 模块可以属于多个缓存组。优化将更喜欢具有更高的缓存组priority。默认组的优先级为负，以允许自定义组采用更高的优先级（默认值适用0于自定义组）。
        },
        // 默认的
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

// 建议设置

单页面应用
runtime webpakc 运行时的包
common 公共的包
async 异步的包
main 启动页 、业务