6.12 打包分析，webCSS分割，contenthash低版本runtimeChunk，Shimming垫片imports-loader，数据驱动绑定，移动端组件库，transition嵌套写法

1、分析有很多，官网推荐。

https://github.com/webpack/analyse

2.1、webpack做打包的时候，会将CSS文件直接打包到js文件里。CSS单独打包如下：

安装插件： MiniCssExtractPlugin
优点： 打包CSS文件
缺点： 开发环境，不支持HMR。
部分配置代码：

test: /\.css$/,
use: [
	MiniCssExtractPlugin.loader,
	'css-loader',
	'postcss-loader'
]

注意 ： 开启TreeShaking配置了usedExports: true后
需要配置package.json的sideEffects数组

 "sideEffects": [
    "*.css"
  ],

2.2、 css代码分割完成会自动合并一些复用类的样式，但发现并未进行最终压缩。

安装压缩css插件： optimize-css-assets-webpack-plugin
结果：OKOK!

更高阶用法详见webpack->MiniCssExtractPlugin

3、contenthash

// 在webpack.dev.js中 若源代码不变则contenthash也不变，用于服务端变化数据使客户端重新读取刷新。
output: {
    filename: '[name].[contenthash]js',
    chunkFilename: '[name].[contenthash].js',
}

结果如下：

4、runtimeChunk（webpack4以下版本需要）

即抽离各js文件的关系数据manifest到公共文件内

 optimization: {
    runtimeChunk: {
      name: runtime
    },
    usedExports: true
  },

4.1、Shimming垫片
Shimming用于注入全局垫片变量。

const webpack = require('webpack')
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery', // 模块中检测到$就引入jquery并命名为$供你使用
    _join: ['lodash', 'join'] // 将lodash的join方法 指向_join
    })
  ]

4.2、importsLoads 用于改变模块作用域指向

在模块内部
console.log(this === window) // false。一个模块的this永远指向自身，而不是全局变量window

cnpm i imports-loader
use: [
      'babel-loader',
      {
        loader: 'imports-loader?this=>window'
      }
    ]

5、数据驱动是vue的特性。
created生命周期可以在dom渲染阶段进行预先的数据赋值。但是此数据即便定义，没有声明在data对象中，依旧是稳定数据，不会被驱动。
要想vue监听到数据的变化。必须放在data中或者computed中
其二，方法名不要和data变量重名，会发生handle.apply报错。

6、移动端高性能、轻量级组件库
Vant 适合电商
Vux 适合微信开发
cube-ui 体积较大、配置复杂、交互优
nut-ui 京东推荐
注：pc端，elment-ui、muise-ui参考。

7、transition嵌套写法
transition标签提供的页面过渡动画不光可以作用第一级div，也可以作用多个div

.slide-mask-enter-active, .slide-mask-leave-active {
	transition: all $animationTime-f;
	.detail-wrapper {
		transition: all $animationTime-f; // 核心就是通过enter/leave的类名变化，去渲染子div的动画
	}
}
.slide-mask-enter, .slide-mask-leave-to {
	opacity: 0;
	.detail-wrapper {
		transform: translateY(100%); 
	}
}