Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
html-critical-webpack-plugin
Advanced tools
Webpack plugin for the critical CSS inliner library.
This plugin extracts critical CSS and runs after all files have been emitted so you can use it after Mini CSS Extract Plugin and HTML Webpack Plugin.
Check out the demo or read the blog post Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS for more details on usage.
npm i --save-dev html-critical-webpack-plugin
Note: As critical itself has a dependency on puppeteer in order to run Headless Chrome, consumers of this plugin will need to make sure that their build environment (local, CI, etc) where they are running Webpack with this plugin has the necessary operating system packages installed. See this page for more information on troubleshooting puppeteer.
...
const HtmlCriticalWebpackPlugin = require("html-critical-webpack-plugin");
module.exports = {
mode: 'production',
plugins: [
new HtmlWebpackPlugin({ ... }),
new MiniCssExtractPlugin({ ... }),
new HtmlCriticalWebpackPlugin({
base: path.resolve(__dirname, 'dist'),
src: 'index.html',
dest: 'index.html',
inline: true,
minify: true,
extract: true,
width: 375,
height: 565,
penthouse: {
blockJSRequests: false,
}
})
]
...
};
Note: Order is import here since critical, the underlying package used by this plugin, only operates against the file system, and not against webpack's build time compilation. The order of operations by critical is as such:
Since the main dependency of this project, critical, depends on an environment that supports Headless Chrome, Docker has been provided to support local development of this project.
After you have installed Docker, you can do the following to get setup:
docker-compose up -d
docker exec -it html-critical-webpack-plugin_nodejs_1 /bin/bash
rm -rf node_modules && npm install
(this ensures Linux specific dependencies get installed)Now you can run the project's npm
scripts like usuual:
npm run test
npm run ci
Note: changes are bi-directional
Learn more about Docker here or configuring Headless Chrome for your own machine.
npm run test
npm run ci
npm run build
FAQs
Webpack plugin for the critical CSS inliner library.
We found that html-critical-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.