prevent-import-loader
prevent-import-loader
is a Webpack loader that can prevent specific modules from being imported into the code in specific environments.
Motivation
Consider the following scenario:
import renderPc from './pcRenderer'
import renderMobile from './mobileRenderer'
if (isMobileDevice) renderMobile()
else renderPc()
In this case, both the pc
and mobile
render modules will be imported into the code, which is not optimized. To prevent this, we can use prevent-import-loader
to prevent imports in specific environments and split the code.
The optimized code will look like:
// @prevent-import-in-mobile
import renderPc from './pcRenderer'
// @prevent-import-in-pc
import renderMobile from './mobileRenderer'
if (isMobileDevice) renderMobile()
else renderPc()
The webpack rules configuration will be as follows:
{
rules: [
{
test: /\.(js)$/,
use: [
{
loader: 'prevent-import-loader',
options: {
commentKeywords: {
'@prevent-import-in-mobile': process.env.DEVICE === 'mobile',
'@prevent-import-in-pc': process.env.DEVICE === 'pc',
},
},
},
],
exclude: /node_modules/,
},
]
}
The generated code when the environment variable DEVICE=mobile
is set will be as follows:
import renderMobile from './mobileRenderer'
const renderPc = null
if (isMobileDevice) renderMobile()
else renderPc()
Installation
npm install prevent-import-loader -D
Usage
{
use: [
{
loader: 'prevent-import-loader',
options: {
// comment keywords to prevent importing, default: ['@prevent-import']
commentKeywords: ['@prevent-import'],
// or
commentKeywords: {
// set to true to prevent importing, false to allow importing
'@prevent-import': true,
},
// @babel/parser plugins, see https://babeljs.io/docs/babel-parser#plugins
parserPlugins: [],
},
},
],
}
Tips
- This loader only supports preventing the importing of ES modules, such as:
import module from 'module'
import { variableA, functionB } from 'module'