flash网站建设技术精粹,百度热搜广告设计公司排名,建设班级网站过程,凡科建站公司webpack优化提升 安装webpack相关内容向下兼容游览器-babel/polyfill进一步优化babel/polyfill模块联邦-共享模块如何提升构建性能通用环境下1#xff0c;webpack更新到最新版本2#xff0c;将loader应用于最少数量的必要模块3#xff0c;引导#xff08;每个额外的loader/… webpack优化提升 安装webpack相关内容向下兼容游览器-babel/polyfill进一步优化babel/polyfill模块联邦-共享模块如何提升构建性能通用环境下1webpack更新到最新版本2将loader应用于最少数量的必要模块3引导每个额外的loader/plugin都有其启动时间尽量少使用工具4解析5小即是快6持久化缓存7自定义plugin/loader8progress plugin9dll10worker池 开发环境下1增量编译2在内存中编译3stats.to.Json加速4Devtool5避免在生产环境才用到的工具6最小化 entry chunk7避免额外的优化步骤8,输出结果不携带路径信息9Node.js版本问题TypeScript Loader 生产环境下不启用sourcMap 安装webpack相关内容
npm init -y自动建立package.jsonnpm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D
向下兼容游览器-babel/polyfill 某些代码在低版本游览器无法兼容使用 采用babel/polyfill兼容 步骤一先安装 npm i babel/polyfill -D 页面导入 npx webpack打包后最终效果 很多很多的内容是因为把游览器许多需要优雅降级的一些包都打在这个项目里面了
进一步优化babel/polyfill 原因import babel/polyfill这样是全局引入整个polyfill包包体积大会污染全局环境 采取这个方式 npm i exports-loader -D npm install core-js3 最后页面上删除import babel/polyfill即可npx webpack即可
模块联邦-共享模块
直接将一个应用的包应用于另一个应用同时具备整体应用以及打包的能力 两者的webpack配置
const HtmlWebpackPlugin require(html-webpack-plugin);
//导入模块联邦
const { ModuleFederationPlugin } require(webpack).container;module.exports {mode: production,entry: ./src/index.js,plugins: [new HtmlWebpackPlugin(),//实例化一下new ModuleFederationPlugin({name: nav, //标识联邦模块的名字别的应用访问这个组件就要通过这个名字filename: remoteEntry.js, //这个远端使用这个模块的名字remotes: {}, //引用其他的联邦模块exposes: {//暴露组件./Header: ./src/Header.js, //./Header代表到时候别人用的时候基于这个路径拼接url},shared: {},}),],
}; 内容调用
如何提升构建性能
通用环境下
1webpack更新到最新版本
2将loader应用于最少数量的必要模块 3引导每个额外的loader/plugin都有其启动时间尽量少使用工具
4解析 5小即是快 6持久化缓存 7自定义plugin/loader 8progress plugin 9dll 注意使用dll的时候必须先安装jquery
const path require(path);
const webpack require(webpack);
module.exports {mode: production,entry: {jquery: [jquery],},output: {filename: [name.js],path: path.resolve(__dirname, dll),library: [name]_[hash],},plugins: [new webpack.DllPlugin({name: [name]_[hash],path: path.resolve(__dirname, dll/manifest.json),}),],
};然后package.json里配置一下 运行时间就会降低了 注意此时提升了构建速度但画面是不行的要再配置一下webpack.config.js
10worker池 注意不要使用太多的worker因为node.js的runtime和loader都有启动开销启动会消耗时间当遇到比较大的进程再使用npm i thread-loader -D在webpack.config.js中
module.exports {mode: development,entry: ./src/index.js,module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [//使用worker池分流{loader: thread-loader,options: {workers: 2,},},{//目的解析一些es6的代码loader: babel-loader,options: {presets: [babel/preset-env],},},],},],},
};
开发环境下
1增量编译 2在内存中编译 3stats.to.Json加速 4Devtool 5避免在生产环境才用到的工具 6最小化 entry chunk 7避免额外的优化步骤 8,输出结果不携带路径信息 9Node.js版本问题 TypeScript Loader 生产环境下
不启用sourcMap
