I have a core component used in various parts of our project. The component is exported as default based on a condition.
export default isLightWeightPdfGlobal || isSchedulingDisabled() ? CSSModules(GraphTableModule, Styles, { allowMultiple: true }) : connect(mapStateToProps)(CSSModules(GraphTableModule, Styles, { allowMultiple: true }));
This module is being used on the homepage; once it gets loaded, it doesn't reload when I go to other modules.
I want the else part of the export to be executed.
webpack split chunk config:
optimization: {
splitChunks: {
chunks: "all",
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
commons: {
chunks: "all",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendor: {
test: /node_modules/,
chunks: "initial",
priority: 10,
enforce: true
}
}
}
}
Related
Hi all I am using webpack 4 and having issues in code-splitting, I have a file main.js that ned to import 5 components that also need to be code-splitted and lazy-loaded with react-router. Now each of the components has their own directory in the source code with an index.js file(it export the component as default export) being the main export file and Is also the file I am importing in main.js for each of the 5 components. I am using lazy loading for these 5 components with React.lazy, but for some reason, they all get bundled into the same chunk for example - packs/js/index.chunk.js. But when I change the name of the main export file(index.js) to something else for each of the 5 components and the file name also is unique for each component then lazy-loading works. What I want is to keep the file name the same as the index.js for each of the components and attain lazy-loading.
I tried magic comments like below but had no success with it.
const x1 = lazy(() => import(/* webpackChunkName: "x1" */ './x1'));
Below is the webpack config
optimization: {
concatenateModules: false,
splitChunks: {
chunks(chunk) {
return true;
},
minSize: 30000,
minChunks: 1,
maxAsyncRequests: Infinity,
maxInitialRequests: Infinity,
automaticNameMaxLength: 30,
},
}
output: {
filename: 'js/[name].[chunkHash:6].js',
chunkFilename: 'js/[name].[chunkHash:6].chunk.js',
publicPath: `${process.env.CDN_HOST}/packs/`,
}
see this doc: https://v4.webpack.js.org/guides/code-splitting/#prevent-duplication
https://v4.webpack.js.org/plugins/split-chunks-plugin/
optimization: {
splitChunks: {
chunks: 'all',
},
},
==========
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: Infinity,
maxInitialRequests: Infinity,
automaticNameMaxLength: 30,
},
},
It is a project composed of Vite & React & antd.
I want to handle antd theme dynamically in vite.config.ts.
I would appreciate it if you could tell me how to modify less.modifyVars value in React component.
This is the current screen.
light state /
dark state
In dark mode, the style of the select component does not work properly.
import { getThemeVariables } from 'antd/dist/theme'
...
css: {
modules: {
localsConvention: 'camelCaseOnly'
},
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
...getThemeVariables({
dark: true // dynamic
})
}
}
}
}
}
You need to import 'antd/dist/antd.less' instead of 'antd/dist/antd.css'
Install dependency for less npm add -D less. Vite will automatically catch it.
Use the following config:
css: {
preprocessorOptions:{
less: {
modifyVars: {
'primary-color': '#1DA57A',
'heading-color': '#f00',
},
javascriptEnabled: true,
},
},
},
It's been a while, but this is works for me now:
You need to make sure you import less on demand. I use plugin vite-plugin-imp to achieve. And then getThemeVariables should be work well.
import vitePluginImp from 'vite-plugin-imp';
import { getThemeVariables } from 'antd/dist/theme';
export default defineConfig({
plugins: [
// ...
vitePluginImp({
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
resolve: {
alias: [
// { find: '#', replacement: path.resolve(__dirname, 'src') },
// fix less import by: #import ~
// https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
{ find: /^~/, replacement: '' },
],
},
css: {
preprocessorOptions: {
less: {
// modifyVars: { 'primary-color': '#13c2c2' },
modifyVars: getThemeVariables({
dark: true,
// compact: true,
}),
javascriptEnabled: true,
},
},
},
});
Moreover: you can get more inspiration from here: vite-react/vite.config.ts
I am trying to figure out how to use CRACO (https://github.com/gsoft-inc/craco) to disable file chunking in create react app.
I have created the following craco.config.js:
// craco.config.js
module.exports = {
output: {
fileName: 'static/js/bundle.js',
},
}
But it doesn't have any effect. What should the config look like to disable file chunking in CRA with CRACO?
EDIT: To disable chunking completely I believe this might do it.
Source: https://github.com/facebook/create-react-app/issues/5306#issuecomment-650737697
// craco.config.js
module.exports = {
webpack: {
configure: {
optimization: {
runtimeChunk: false,
splitChunks: {
chunks(chunk) {
return false
},
},
},
},
},
}
ORIGNIAL:
Maybe this could help?
module.exports = {
webpack: {
configure: {
output: {
filename: 'static/js/bundle.js',
},
optimization: {
runtimeChunk: false,
splitChunks: {
chunks: 'all',
cacheGroups: {
default: false,
vendors: false,
// vendor chunk
},
},
},
},
},
plugins: [
{
plugin: require('craco-plugin-scoped-css'),
},
],
}
I'm using webpack in my react project.
I'm looking for the best approach about the DLL's configuration,
my latest approach is to split the DLL's to many small files.
the code in my webpack.cofig is:
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
The result is a long bundle time.
This is a good approach or it's better to have bigger DLL's files?
I am using typescript, webpack, sass in my project. now I set background-imgae in scss using this way: url(../../assets/image/a.png),
however it is really ugly, I want to import image like this: url(a.png), what should I do ?
I have used url-loader, file-loader, resolve-url-loader to solve the problem, actually, I am just a entry level of webpack. I am really confused now. Here is my code
in wepack :
{
test: /\.scss|css$/i,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1
}
},
{
loader: require.resolve("sass-loader")
},
{
loader: require.resolve("resolve-url-loader")
},
AntdScssThemePlugin.themify({
loader: "sass-loader",
options: {
sourceMap: true
}
}),
{
loader: require.resolve("postcss-loader"),
options: {
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9"
],
flexbox: "no-2009"
}),
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
]
}
}
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
"file-loader?hash=sha512&digest=hex&name=[hash].[ext]",
{
loader: "image-webpack-loader",
query: {
mozjpeg: {
progressive: true
},
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 4
},
pngquant: {
quality: "75-90",
speed: 3
}
}
},
]
},
In index.scss
background: url("../../assets/images/sprite_languages.png")
and I really want to use this way:
background: url("sprite_languages.png")
What could I do? Thank you very much
You could do this in webpack config:
resolve: {
alias: {
'#assets': path.resolve(__dirname, './src/assets'),
},
},
And then in scss:
background: url("~#assets/images/sprite_languages.png");