// 提取css到单独的文件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // optimizeCssPlugin CSS文件压缩插件 const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); const extractSCSS = new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[name]_[contenthash:8].css', fallback:'style-loader' }); ... ... plugins: [ new optimizeCssPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }), ]
webpack配置接入CDN
CDN
网站接入CDN，需要将网页的静态资源上传到CDN服务器，使用CDN地址访问；
使用CDN可以决解资源并行下载限制，处理静态资源Cookie同域名携带等问题；
CDN缓存和回源需要合理的设置静态资源hash接入CDN会引入多个域名，增加域名解析时间，可进行预解析域名<link href="https://js.dns.com" />
webpack实现接入
output.publicPath设置JavaScript地址
css-loader.publicPath设置CSS导入的资源地址
WebPlugin.stylePublicPath中设置Css文件地址
// JavaScript output: { publicPath: '//js.cdn.com/js/', path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方 // 为输出的JavaScript文件名加上Hash值使用`chunkhash`（chunkhash：根据模块内容变化；hash: 根据每次构建随机） filename: "js/[name].[chunkhash:8].js", chunkFilename: "js/[name]-[id].[chunkhash:8].js", },
开启gzip压缩
使用插件：npm i -D compression-webpack-plugin;
webpack配置
const CompressionPlugin = require("compression-webpack-plugin"); plugins: [ new CompressionPlugin({ filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串 algorithm: 'gzip',//算法 test: /\.(js|css)$/, //压缩 js 与 css threshold: 10240,//只处理比这个值大的资源。按字节计算 minRatio: 0.8//只有压缩率比这个值小的资源才会被处理 }) ]
后台开启使用koa
const staticCache = require('koa-static-cache'); import config from './configs'; const app = new Koa(); app.use(staticCache(path.resolve(__dirname, "../dist"), { maxAge: 7 * 24 * 60 * 60, gzip: true, //开启 dynamic: true, }))
接入treeShaking，剔除无用代码
Tree Shaking可以用来找出有用代码，去除JavaScript中用不上的死代码；但是它依赖于ES6静态花模块语法import\export的导入和导出
webpack接入
修改.babelrc保留ES6模块话语句
注意新版本babel-preset-env已经预设babel-preset-es2015,babel推荐使用babel-preset-env取代babel-preset-es2015，并且继续使用babel-preset-es2015会发出警告信息。
{ "presets": [ ["env", { "modules": false }] ], "plugins": ["syntax-dynamic-import"] }
webpack --display-used-exports运行构建带上--display-used-exports可追踪到Tree Shaking的工作；
Webpack只能正确的分析出如何剔除死代码，需要接入UglifyJs处理剔除（配置见上）
开启Scope Hoistion
scope hoisting即作用域提升;
在构建过程中，webpack会借助ES6 模块化的静态特性，确定模块的依赖关系，将一个bundle中的静态依赖提升到顶部。（所以需要和接入treeShaking一样配置Babel开启ES6模块化）
原理：分析模块间的依赖关系，尽可能的将零散的模块合并到一个函数中去，前提不能造成代码冗余，因此只有被引用了一次的模块才能被合并。
接入好处：
代码体积减少
代码在运行时因为创建的函数作用域更少了，内存开销也随之变小
webpack接入ModuleConcatenationPlugin内置插件
const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin'); plugins: [ new ModuleConcatPlugin(), //开启scope Hoisting ],