Webpack | 易学教程

Vue index.html contains <link> tags to several lazy-loaded components

阅读更多关于 Vue index.html contains tags to several lazy-loaded components

问题 I'm trying to improve the load time of my website, and towards that, I'm using the following settings in my vue.config.js : config.output.chunkFilename(`js/[name].[chunkhash:8].js`) config.optimization .runtimeChunk('single') .splitChunks({ chunks: 'all', maxInitialRequests: Infinity, minSize: 0, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name (module) { // get the name. E.g. node_modules/packageName/not/this/part.js // or node_modules/packageName const packageName = module

Why is [name] always main in MiniCssExtractPlugin for webpack?

阅读更多关于 Why is [name] always main in MiniCssExtractPlugin for webpack?

问题 In webpack when configuring the MiniCssExtractPlugin, I don't understand why [name] is always "main"? plugins: [ new MiniCssExtractPlugin({ filename: 'assets/css/[name].css' // where does the name "main" come from? }) ] How could I pass a variable in so that [name] is the name of my app and not "main" without hardcoding it in like filename: 'assets/css/myapp.css' ? Webpack output config: module.exports = { entry: './src/app.js', output: { path: utils.resolve('/dist'), }, The wierd thing is

Why is [name] always main in MiniCssExtractPlugin for webpack?

阅读更多关于 Why is [name] always main in MiniCssExtractPlugin for webpack?

this.util.TextEncoder is not a constructor only in electron app (works in chrome)

阅读更多关于 this.util.TextEncoder is not a constructor only in electron app (works in chrome)

问题 I am creating a body segmentation app using tensorflow bodypix model. It works fine in the browser. I am using webpack to use its modules(see below) import * as wasm from "@tensorflow/tfjs-backend-wasm"; import * as tf from "@tensorflow/tfjs-core"; import * as bodyPix from "@tensorflow-models/body-pix"; wasm.setWasmPaths("./wasm/"); tf.setBackend("wasm").then(() => { //some simple vanilla js code }); //some more vanilla js code... It works exactly fine in chrome and giving output as expected

Vue DOM image won't show correctly

阅读更多关于 Vue DOM image won't show correctly

问题 I'm using the Vue framework and creating an image using the DomUtil.Create function. In this image I want to dynamically write the source to this image. But the image won't show to the user. I put a normal image on the page using the <img> tag and it works here. Only when creating the DOM element it doesn't work. I put the path hard coded in here so it is certain that the path is correct. var img = L.DomUtil.create("img", "popUpImg", divImg); img.src = '@/assets/pictures/1.png'; 回答1: Use

TypeError: Cannot read property 'prototype' of undefined React Express

阅读更多关于 TypeError: Cannot read property 'prototype' of undefined React Express

问题 I have a project uses Express and react, Everything was working fine, I didn't make any changes to the code suddenly it starts to give this error. In the previous days, I have upgraded node from 10.15.0 to 12.x and added Axios. I tested after those changes and it works. now it does not, what this mean?? TypeError: Cannot read property 'prototype' of undefined (anonymous function) C:/Desktop/ahmad/client/node_modules/express/lib/response.js:42 39 | * @public 40 | */ 41 | > 42 | var res =

前端性能优化总结

阅读更多关于前端性能优化总结

gzip压缩 gzip压缩效率很高，可以达到70%的压缩率 //npm i -D compression-webpack-plugin 安装插件依赖 configureWebpack: config => { const CompressionPlugin = require ( 'compression-webpack-plugin' ) config.plugins.push( new CompressionPlugin()) } 去掉console.log 生产环境中，不需要打印日志。通过对webpack进行配置，打包时自动去掉console.log //npm i -D terser-webpack-plugin configureWebpack: config => { const TerserPlugin = require ( 'terser-webpack-pulugin' ) config.optimzation.minimizer.push( new TerserPlugin({ extractComments : false , terserOptions :{ compress :{ drop_console : true }} //插件配置项移除console }) ) } 去除SourceMap 代码压缩后进行调bug定位将非常困难

前端性能优化总结

阅读更多关于前端性能优化总结

文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化减少请求数量【合并】　　如果不进行文件合并，有如下3个隐患　　1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟　　2、受丢包问题影响更严重　　3、经过代理服务器时可能会被断开　　但是，文件合并本身也有自己的问题　　1、首屏渲染问题　　2、缓存失效问题　　所以，对于文件合并，有如下改进建议　　1、公共库合并　　2、不同页面单独合并【图片处理】　　1、雪碧图　　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台　　2、Base64 　　将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 　　3、使用字体图标来代替图片【减少重定向】　　尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验　　如果一定要使用重定向

前端性能优化的七大手段

阅读更多关于前端性能优化的七大手段

前面的话　　本文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化减少请求数量【合并】　　如果不进行文件合并，有如下3个隐患　　1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟　　2、受丢包问题影响更严重　　3、经过代理服务器时可能会被断开　　但是，文件合并本身也有自己的问题　　1、首屏渲染问题　　2、缓存失效问题　　所以，对于文件合并，有如下改进建议　　1、公共库合并　　2、不同页面单独合并【图片处理】　　1、雪碧图　　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台　　2、Base64 　　将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 　　3、使用字体图标来代替图片【减少重定向】　　尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验　　如果一定要使用重定向

如何比较 NextJS 和 Create-React-App 这两个工具

阅读更多关于如何比较 NextJS 和 Create-React-App 这两个工具

翻译自 Malcolm Laing 原文： https://medium.com/frontend-digest/whats-the-difference-between-nextjs-and-create-react-app-11b55650a612 应该为你的应用选择哪个工具呢？在 2021 年创建新的React项目时，有两个明确的选择： NextJS 或 Create-React-App 。 Gatsby 已经失宠了。由于大规模构建缓慢， NextJS 成为更好的静态站点生成器。让我们回顾一下 NextJS 和 Create-React-App 的优缺点，我们还将介绍哪些用例和场景更适合其中一个。 Create-React-App Create-React-App是一个脚手架，它使我们能够为我们创建一个新的React应用程序。它将 webpack 和 babel 封装在一起，组成一个新的脚本工具 react-scripts 来管理整个应用，这样会减少很多复杂式，还有学习成本。这意味着更新那些 “隐藏的” 依赖关系是一件容易的事。等待新版本的react脚本，然后进行更新。无需随意修复webpack配置的重大更改。使用Create-React-App的优势比较自由欢迎您使用任何您喜欢的库，没有规则或建议，您可以使用任何您喜欢的路由库。在客户端 render （渲染

订阅 Webpack