webpack+react+antd脚手架优化的方法
在中了解了webpack v4的特性,现在将知识用于实践,对之前写的一个react脚手架进行打包性能的优化。
优化类目
- 样式分离
- 第三方资源分离
- 区分开发环境
- 热更新
- 提取公共代码
1. css分离
npm install extract-text-webpack-plugin -d
webpack.config.js
将css、less、sass文件单独从打包文件中分离
+ let cssextract = new extracttextwebpackplugin({ + filename: 'css.css', + allchunks: true + }); + let sassextract = new extracttextwebpackplugin('sass.css') + let lessextract = new extracttextwebpackplugin('less.css')
在webpack.config.js中单独添加规则,
- test:匹配处理文件的扩展名的正则表达式
- include/exclude手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
{ test: /\.css$/, use: cssextract.extract({ fallback: "style-loader", use: ['css-loader?minimize','postcss-loader'], publicpath: "/dist" }), include:path.join(__dirname,'./src'), exclude:/node_modules/ }, { test: /\.scss$/, use: sassextract.extract({ fallback: "style-loader", use: ["css-loader?minimize","sass-loader"], publicpath: "/dist" }), include:path.join(__dirname,'./src'), exclude:/node_modules/ }, { test: /\.less$/, loader: lessextract.extract({ use: ["css-loader?minimize", "less-loader"] }), include:path.join(__dirname,'./src'), exclude:/node_modules/ },
然后运行webpack命令时报错
compilation.maintemplate.applypluginswaterfall is not a function
use chunks.groupsiterable and filter by instanceof entrypoint instead
研究得出结论:webpack升级到v4然而响应的插件没有升级的原故。
解决方法:安装指定版本的依赖
"html-webpack-plugin": "^3.0.4" "extract-text-webpack-plugin": "^4.0.0-beta.0"
resolve
指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
resolve: { //引入模块的时候,可以不用扩展名 extensions: [".js", ".less", ".json"], alias: {//别名 "bootstrap": "bootstrap/dist/css/bootstrap.css" } }
监听文件修改
webpack模式下使用,webpack-dev-server模式不用,可以将watch改为false
watchoptions: { ignored: /node_modules/, aggregatetimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次 }
提取公共代码
optimization: { splitchunks: { cachegroups: { commons: { chunks: "initial", minchunks: 2, maxinitialrequests: 5, // the default limit is too small to showcase the effect minsize: 0 // this is example is too small to create commons chunks }, vendor: { test: /node_modules/, chunks: "initial", name: "vendor", priority: 10, enforce: true } } } }
分离react react-dom ant公共代码
方法一:externals
在页面上引入第三方资源库,然后使用externals防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
<script src="https://cdn.bootcss.com/react/16.4.0-alpha.0911da3/cjs/react.production.min.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/cjs/react-dom-server.browser.production.min.js"></script> externals: { 'react': 'react', 'react-dom': 'reactdom', // 提出ant design的公共资源, }
方法二:dll
dll在上篇文章中写过,但是打包后一直出现
后来才发现是页面上没有引入资源。。。。(我一直以为会webpack自动生成在页面上....)
在index.html文件中引入
<script src="./vendor/react.dll.js"></script>
分离成功!上代码
webpack.base.js
var path = require('path'); var webpack = require('webpack'); var extracttextwebpackplugin = require("extract-text-webpack-plugin"); const htmlwebpackplugin = require("html-webpack-plugin"); const cleanwebpackplugin = require('clean-webpack-plugin'); const copywebpackplugin = require('copy-webpack-plugin') let cssextract = new extracttextwebpackplugin({ filename: 'css.css', allchunks: true }); let sassextract = new extracttextwebpackplugin('sass.css') let lessextract = new extracttextwebpackplugin('less.css') module.exports = { entry:'./src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.[hash:8].js', publicpath: '' }, resolve: { //引入模块的时候,可以不用扩展名 extensions: [".js", ".less", ".json"], alias: {//别名 "bootstrap": "bootstrap/dist/css/bootstrap.css" }, modules: [path.resolve(__dirname, 'node_modules')] }, /* externals: { 'react': 'react', 'react-dom': 'reactdom', // 提出ant design的公共资源 //'antd': 'antd', },*/ devtool: 'source-map', devserver: { contentbase:path.resolve(__dirname,'dist'), publicpath: '/', port: 8080, hot:true, compress:true, historyapifallback: true, inline: true }, watch: false, //只有在开启监听模式时,watchoptions才有意义 watchoptions: { ignored: /node_modules/, aggregatetimeout: 300, //监听到变化发生后等300ms再去执行动作,防止文件更新太快导致编译频率太高 poll: 1000 //通过不停的询问文件是否改变来判断文件是否发生变化,默认每秒询问1000次 }, optimization: { splitchunks: { cachegroups: { commons: { chunks: "initial", minchunks: 2, maxinitialrequests: 5, // the default limit is too small to showcase the effect minsize: 0 // this is example is too small to create commons chunks }, vendor: { test: /node_modules/, chunks: "initial", name: "vendor", priority: 10, enforce: true } } } }, module: { rules:[ { test: /\.js$/, use: { loader:'babel-loader', options: { presets: ['env','es2015', 'react'], } }, include:path.join(__dirname,'./src'), exclude:/node_modules/ }, { test: /\.css$/, use: cssextract.extract({ fallback: "style-loader", use: ['css-loader?minimize','postcss-loader'], publicpath: "/dist" }), include:path.join(__dirname,'./src'), exclude:/node_modules/ }, { test: /\.scss$/, use: sassextract.extract({ fallback: "style-loader", use: ["css-loader?minimize","sass-loader"], publicpath: "/dist" }), include:path.join(__dirname,'./src'), exclude:/node_modules/ }, { test: /\.less$/, loader: lessextract.extract({ use: ["css-loader?minimize", "less-loader"] }), include:path.join(__dirname,'./src'), exclude:/node_modules/ }, { test: /\.(html|htm)/, use: 'html-withimg-loader' }, { test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/, use: { loader:'url-loader', options:{ limit: 5 * 1024, //指定拷贝文件的输出目录 outputpath: 'images/' } } } ] }, plugins: [ //定义环境变量 new webpack.defineplugin({ __development__: json.stringify(process.env.node_env) }), new cleanwebpackplugin(['dist']), cssextract, lessextract, sassextract, new htmlwebpackplugin({ title: 'react biolerplate by yuanyuan', template: './src/index.html', filename: `index.html`, hash: true }), new webpack.dllreferenceplugin({ manifest: path.join(__dirname, 'vendor', 'react.manifest.json') }), new copywebpackplugin([{ from: path.join(__dirname,'vendor'),//静态资源目录源地址 to:'./vendor' //目标地址,相对于output的path目录 }]), /* new webpack.optimize.commonschunkplugin({ name: 'common' // 指定公共 bundle 的名称。 + })*/ new webpack.hotmodulereplacementplugin(), // 热替换插件 new webpack.namedmodulesplugin() // 执行热替换时打印模块名字 ] };
webpack.config.js
const path = require('path'); const webpack = require('webpack'); const merge = require('webpack-merge');//用来合并配置文件 const base = require('./webpack.base'); let other = ''; //console.log(process.env.node_env ) if (process.env.node_env == 'development') { other = require('./webpack.dev.config'); } else { other = require('./webpack.prod.config'); } //console.log(merge(base, other)); module.exports = merge(base, other); webpack.prod.config.js const path = require('path'); const webpack = require('webpack'); const uglifyjsplugin = require('uglifyjs-webpack-plugin') module.exports = { output: { filename: 'bundle.min.js', }, plugins: [ new uglifyjsplugin({sourcemap: true}) ] }
打包速度优化,打包文件细化,改造成功~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。