We have lot of pages and lots of stylesheets. We wanted to inline some critical styles on some components to avoid network requests; I'd achieved the requirement by using style-loader with inline import in webpack 4 like this:
import React from "react";
import "./style.sass";
import FancyButton from "components/UIkit/FancyButton";
to: (!! at the beginning will disable all configured loaders)
import React from "react";
import "!!style-loader!css-loader!sass-loader!./style.sass";
import FancyButton from "components/UIkit/FancyButton";
this works fine and injects the scss into <style></style> tag; BUT in won't minfiy css.
I need a way to minify them too; preferably using inline import commands, magic comments or something like this:
!style-loader!require('mini-css-extract-plugin').loader!css-loader!less-loader!./style.less
our webpack config is ejected version create-react-app with slight modification to meet our needs. and for normal imports it works perfectly fine; and minifies all the csss using MiniCssExtractPlugin. but Inlining imports won't follow the default pipeline and hence no minification.
I also welcome other suggestions to inline critical styles; (consider they can be .scss, .less, .module.scss)
excluding this way:
Inline CSS using Webpack
Related
I'm really confused by this file index.js:
import Cookies from 'js-cookie';
import createHash from 'sha.js';
import Evaporate from 'evaporate';
import SparkMD5 from 'spark-md5';
import './css/bootstrap-progress.css';
import './css/styles.css';
...
Why would you import a .css file in a .js file? I've never seen this before. Is this common? What does it allow you to do?
The repository appears to be using Parcel. See
Parcel's docs on CSS:
Parcel includes support for CSS out of the box. To add a CSS file, either ... ... or import it from a JavaScript file:
import './index.css';
What it will do is, if that JavaScript module is included, when the module is imported, it will insert the CSS (from that ./css/styles.css path in the source code) onto the page. It's not a native JavaScript functionality of ES6 modules - it's something that a bundler (like Parcel, or Webpack, etc) manages. When bundling, the CSS text will be turned into a JavaScript string somewhere in the resulting bundle, and then put onto the page with something like
const style = document.createElement('style');
document.body.appendChild(style);
style.textContent = `<CONTENT OF IMPORTED CSS>`;
Building a package with UI components using CSS modules. Each component is totally separated from others and includes CSS styles like this:
import css from './styles.css'
const Component = () => {
return (
<div className={css.container}>Hello there!</div>
)
}
export { SearchBar }
In another package based on Next.js I want import a component like this:
import { Component } from '#me/components'
But Next.js doesn't allow Module CSS import from node_modules.
My question is how can I build the component package with CSS transformed into JS. It shouldn't be merged into one file just like Webpack do. Instead it should build each component separately. Also I don't want to import a huge CSS files with all styles merged into single file. Easiest way would be to use CSS-in-JS, but I want to use PostCSS written in CSS files.
Am a new bee with React and I usually have custom css files and libraries I use for my web app development. I have been able to import my css files with require and css-loader npm install. I want to know If I can use SystemJS to import libraries like waves.js from bower_components and use it like I would in JQuery/Javascript Waves.attach(".btn:not(.btn-icon):not(.btn-float)"), Waves.attach(".btn-icon, .btn-float", ["waves-circle", "waves-float"]), Waves.init()
If it is possible how would I do this and If not how can I import waves because into my project.
I imported my waves.js file like so without system js and called the attach functions in the componentDidMount function and it worked like a charm
import Waves from "../../libs/bower_components/Waves/dist/waves.min.js";
componentDidMount() {
Waves.attach(".btn:not(.btn-icon):not(.btn-float)");
Waves.attach(".btn-icon, .btn-float", ["waves-circle", "waves-float"]);
Waves.init();
}
I am quite curious about these imports.
import Button from "react-bootstrap/lib/Button";
import { Button } from "react-bootstrap";
They both load button very well, but does it matter on final size of the bundle?
Yes, in fact, it does matter in regards to the final bundle size in this specific case. Per the React Bootstrap Documentation:
Bundle size optimization
If you install React-Bootstrap using npm, you can import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the size of your client bundle.
The emphasis is mine. The above confirms that importing from a specific file in a subdirectory at react-bootstrap/lib reduces bundle size as bundlers will not include the whole library which would happen if you imported directly from the library with import { Button } from 'react-bootstrap'.
Another thing to note is that bundlers such as Webpack do have features such as tree-shaking to remove unnecessary modules when only importing a certain part of a library but it's not working reliably with React Bootstrap yet, so prefer the first choice for bundle size optimization. As for other cases with other libraries, it depends on if tree-shaking can be reliably used, and in that case it shouldn't matter which way you import a component of the library.
In my webpack build, I would like to load React from a CDN, but not ReactDOM, as it requires an extra roundtrip for a very small file.
My webpack configuration has the following block of code declaring "externals" so that it will not build these files (I instead include CDNs).
webpack.config.js
...
externals: {
react: 'React'
},
...
The problem is that only including React in externals still builds React because ReactDOM depends on it.
node_modules/react-dom/index.js
module.exports = require('react/lib/ReactDOM');
Adding 'react-dom': 'ReactDOM' to externals effectively removes them both from the bundle, but I don't want to have to include the ReactDOM CDN...
How can I configure webpack to load React from a CDN, but include ReactDOM in my main bundle?
Note: I'm using webpack 2.1.0-beta17 and React 15.1.0.
Update
I tried adding react/lib/ReactDOM to externals.
...
externals: {
react: 'React',
'react/lib/ReactDOM': 'commonjs react-dom'
},
...
But I get the following error.
require is not defined
[Not an answer, too big for comment]
See issues https://github.com/facebook/react/issues/5413, https://github.com/facebook/react/issues/6128, which argue for having a CDN bundle of React+ReactDom, which would float your boat, if I understand correctly. Dan Abramov feels it, so I'm hopeful. Note, however, his comment that ReactDOM will get a lot bigger soon.